/* Vigia — painel. Sem fontes ou bibliotecas externas: funciona sem internet, dentro da loja ou de casa. */
:root {
  --tinta: #12303b;        /* texto e barra do topo */
  --tinta-suave: #4d6670;
  --fundo: #eef2f0;
  --papel: #fbfcfb;
  --linha: #d5dedb;
  --acao: #17667f;         /* botões e links */
  --acao-forte: #0f4f63;
  --ok: #2c7a58;
  --alerta: #c2362c;
  --atencao: #b97e06;
  --noite: #3d4a8f;
  --modo: var(--ok);       /* cor da faixa de situação; muda com o modo */
  --raio: 10px;
  --fonte: "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;
  --titulo: "Segoe UI Variable Display", "Segoe UI Semibold", Roboto, system-ui, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #e6eeeb; --tinta-suave: #9db0ae; --fundo: #0e1a1f; --papel: #15252c; --linha: #2a3d45;
    --acao: #6cc0d8; --acao-forte: #9ad6e8; --ok: #5cc197; --alerta: #ff8377; --atencao: #e9b23a; --noite: #9aa6ee;
  }
  .topo { background: #0a1418 !important; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.5 var(--fonte); color: var(--tinta); background: var(--fundo); padding-bottom: env(safe-area-inset-bottom); }
h1, h2, h3 { font-family: var(--titulo); line-height: 1.2; margin: 0; font-weight: 650; letter-spacing: -0.01em; }
h2 { font-size: 1.25rem; margin: 2rem 0 .75rem; }
h3 { font-size: 1.02rem; }
p { margin: 0 0 .75rem; max-width: 68ch; }
a { color: var(--acao); }
small, .suave { color: var(--tinta-suave); font-size: .875rem; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--acao); outline-offset: 2px; border-radius: 4px; }
.pular { position: absolute; left: -999px; top: 0; background: var(--papel); padding: .5rem 1rem; z-index: 50; }
.pular:focus { left: .5rem; top: .5rem; }

/* ---------- topo ---------- */
.topo { background: #12303b; color: #f3f6f4; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem clamp(1rem, 3vw, 2rem); position: sticky; top: 0; z-index: 20; }
.marca { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.marca svg { color: #e9b23a; flex: none; }
.marca b { font-family: var(--titulo); font-size: 1.05rem; letter-spacing: .01em; display: block; line-height: 1.1; }
.marca span { font-size: .8rem; opacity: .75; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
.abas { display: flex; gap: .25rem; }
.abas a { color: inherit; text-decoration: none; padding: .45rem .8rem; border-radius: 999px; font-size: .95rem; opacity: .8; position: relative; }
.abas a:hover { opacity: 1; background: rgba(255,255,255,.08); }
.abas a[aria-current="page"] { opacity: 1; background: rgba(255,255,255,.16); font-weight: 600; }
.abas .conta { background: var(--alerta); color: #fff; border-radius: 999px; font-size: .7rem; padding: 0 .4rem; margin-left: .3rem; font-weight: 700; }
main { max-width: 1240px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem) 4rem; }
main:focus { outline: none; }
@media (max-width: 640px) {
  .abas { position: fixed; bottom: 0; left: 0; right: 0; background: #12303b; justify-content: space-around; padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom)); z-index: 30; }
  .abas a { padding: .5rem .6rem; font-size: .88rem; }
  main { padding-bottom: 6rem; }
  #avisos { bottom: 4.5rem !important; }
}

/* ---------- faixa de situação (o elemento principal da tela inicial) ---------- */
.situacao { margin: 0 calc(-1 * clamp(1rem, 3vw, 2rem)); padding: 1.4rem clamp(1rem, 3vw, 2rem) 1.3rem; border-bottom: 4px solid var(--modo); background: linear-gradient(to bottom, color-mix(in srgb, var(--modo) 13%, var(--fundo)), var(--fundo)); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.situacao h1 { font-size: clamp(1.6rem, 4.6vw, 2.7rem); letter-spacing: -0.025em; max-width: 22ch; }
.situacao p { margin: .35rem 0 0; color: var(--tinta-suave); }
.situacao.em-alerta { --modo: var(--alerta); }
.modos { display: flex; flex-direction: column; gap: .35rem; }
.modos .seg { display: inline-flex; background: var(--papel); border: 1px solid var(--linha); border-radius: 999px; padding: 3px; }
.modos button { border: 0; background: none; color: var(--tinta); font: inherit; font-size: .92rem; padding: .4rem .9rem; border-radius: 999px; cursor: pointer; }
.modos button[aria-pressed="true"] { background: var(--modo); color: #fff; font-weight: 600; }
@media (prefers-color-scheme: dark) { .modos button[aria-pressed="true"] { color: #08161b; } }
.modos button:disabled { cursor: default; opacity: .75; }

.faixa-aviso { margin: 1rem 0 0; padding: .7rem 1rem; border-radius: var(--raio); background: color-mix(in srgb, var(--atencao) 16%, var(--papel)); border: 1px solid color-mix(in srgb, var(--atencao) 45%, var(--linha)); display: flex; gap: .75rem 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.faixa-aviso p { margin: 0; }

/* ---------- câmeras ---------- */
.cameras { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.camera { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.camera.em-alerta { border-color: var(--alerta); box-shadow: 0 0 0 2px color-mix(in srgb, var(--alerta) 35%, transparent); }
.camera .video { background: #0b1418; aspect-ratio: 4 / 3; display: grid; place-items: center; color: #b9c8c6; position: relative; }
.camera .video img { width: 100%; height: 100%; object-fit: contain; display: block; }
.camera .video .espera { text-align: center; padding: 1rem; font-size: .95rem; }
.camera .cab { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem .9rem .2rem; }
.camera .cab h3 { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.ponto { width: .6rem; height: .6rem; border-radius: 50%; background: var(--ok); flex: none; }
.ponto.fora { background: var(--alerta); }
.ponto.espera { background: var(--atencao); }
.areas { display: flex; flex-wrap: wrap; gap: .4rem; padding: .5rem .9rem .9rem; list-style: none; margin: 0; }
.areas li { border: 1px solid var(--linha); border-radius: 6px; padding: .2rem .55rem; font-size: .88rem; display: flex; gap: .5rem; align-items: baseline; }
.areas li b { font-variant-numeric: tabular-nums; }
.areas li.alerta { border-color: var(--alerta); background: color-mix(in srgb, var(--alerta) 12%, var(--papel)); color: var(--alerta); font-weight: 600; }
.vazio { border: 1.5px dashed var(--linha); border-radius: var(--raio); padding: 2rem 1.25rem; text-align: center; color: var(--tinta-suave); background: color-mix(in srgb, var(--papel) 60%, transparent); }
.vazio p { margin: 0 auto .9rem; }

/* ---------- alertas ---------- */
.lista-alertas { list-style: none; margin: 0; padding: 0; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.lista-alertas li { display: grid; grid-template-columns: 4.6rem 1fr auto; gap: .25rem 1rem; padding: .7rem .9rem; border-top: 1px solid var(--linha); align-items: center; border-left: 4px solid var(--cor, var(--linha)); }
.lista-alertas li:first-child { border-top: 0; }
.lista-alertas time { color: var(--tinta-suave); font-variant-numeric: tabular-nums; font-size: .9rem; }
.lista-alertas .onde { color: var(--tinta-suave); font-size: .85rem; display: block; }
.lista-alertas img { width: 78px; height: 54px; object-fit: cover; border-radius: 5px; display: block; background: #0b1418; }
.cat-seguranca { --cor: var(--alerta); } .cat-produtividade { --cor: var(--atencao); } .cat-conversao { --cor: var(--acao); }
.cat-cuidado { --cor: #a8508f; } .cat-aviso { --cor: var(--ok); }
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 1rem; align-items: center; }
.chip { border: 1px solid var(--linha); background: var(--papel); color: var(--tinta); border-radius: 999px; padding: .35rem .85rem; font: inherit; font-size: .9rem; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--tinta); color: var(--fundo); border-color: var(--tinta); }
.chip b { font-variant-numeric: tabular-nums; margin-left: .3rem; }

/* ---------- formulários e botões ---------- */
button, .botao { font: inherit; }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 1px solid var(--acao); background: var(--acao); color: #fff; padding: .55rem 1.05rem; border-radius: 8px; cursor: pointer; text-decoration: none; font-weight: 600; font-size: .95rem; }
@media (prefers-color-scheme: dark) { .botao { color: #08161b; } }
.botao:hover { background: var(--acao-forte); border-color: var(--acao-forte); }
.botao.leve { background: transparent; color: var(--acao); }
.botao.leve:hover { background: color-mix(in srgb, var(--acao) 10%, transparent); }
.botao.perigo { background: transparent; color: var(--alerta); border-color: color-mix(in srgb, var(--alerta) 50%, var(--linha)); }
.botao.pequeno { padding: .3rem .7rem; font-size: .87rem; font-weight: 500; }
.botao:disabled { opacity: .55; cursor: default; }
label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .25rem; }
input[type=text], input[type=email], input[type=tel], input[type=month], input[type=password], input[type=number], input[type=time], input[type=date], select, textarea { font: inherit; color: var(--tinta); background: var(--papel); border: 1px solid color-mix(in srgb, var(--tinta-suave) 55%, var(--linha)); border-radius: 7px; padding: .5rem .65rem; width: 100%; min-height: 2.5rem; }
input[type=number] { font-variant-numeric: tabular-nums; }
.campo { margin-bottom: 1rem; }
.campo .dica { font-weight: 400; color: var(--tinta-suave); font-size: .85rem; margin: .25rem 0 0; }
.linha { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; }
.linha > .campo { flex: 1 1 10rem; }
.marcar { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; font-size: .95rem; margin: 0 .9rem .4rem 0; cursor: pointer; }
.marcar input { width: 1.1rem; height: 1.1rem; accent-color: var(--acao); }
.secao { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.25rem; margin-bottom: 1.25rem; }
.secao > h2 { margin-top: 0; }
.secao > .acoes { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: .5rem; }
.titulo-pagina { margin: 1.75rem 0 1.25rem; }
.titulo-pagina h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); letter-spacing: -0.02em; }
.titulo-pagina p { color: var(--tinta-suave); margin: .35rem 0 0; }

/* tipos de lugar */
.perfis { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.perfis label { border: 1.5px solid var(--linha); border-radius: 9px; padding: .7rem .8rem; cursor: pointer; font-weight: 400; margin: 0; display: block; }
.perfis label b { display: block; font-size: 1rem; }
.perfis label span { color: var(--tinta-suave); font-size: .85rem; line-height: 1.35; display: block; }
.perfis input { position: absolute; opacity: 0; }
.perfis label:has(input:checked) { border-color: var(--acao); background: color-mix(in srgb, var(--acao) 9%, var(--papel)); }
.perfis label:has(input:focus-visible) { outline: 3px solid var(--acao); outline-offset: 2px; }

.lista-cameras { list-style: none; padding: 0; margin: 0 0 1rem; }
.lista-cameras li { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; padding: .7rem 0; border-top: 1px solid var(--linha); }
.lista-cameras li:first-child { border-top: 0; }
.lista-cameras code { font-size: .82rem; color: var(--tinta-suave); word-break: break-all; }
.previa { max-width: 320px; width: 100%; border-radius: 7px; display: block; margin-top: .6rem; }

/* ---------- relatório ---------- */
.destaques { list-style: none; padding: 0; margin: 0; font-size: 1.08rem; }
.destaques li { padding: .55rem 0; border-top: 1px solid var(--linha); max-width: 70ch; }
.destaques li:first-child { border-top: 0; }
.grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 1.25rem; }
.grande { font-family: var(--titulo); font-size: 2.6rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.barras { display: flex; align-items: flex-end; gap: 3px; height: 130px; margin-top: 1rem; }
.barras { justify-content: center; }
.eixo { justify-content: center; }
.eixo span { max-width: 56px; }
.barras div { flex: 1; max-width: 56px; background: var(--acao); border-radius: 3px 3px 0 0; min-height: 2px; position: relative; }
.barras div.zero { background: var(--linha); }
.eixo { display: flex; gap: 3px; font-size: .72rem; color: var(--tinta-suave); margin-top: .25rem; font-variant-numeric: tabular-nums; }
.eixo span { flex: 1; text-align: center; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th { text-align: left; font-weight: 600; color: var(--tinta-suave); font-size: .82rem; padding: .4rem .5rem; border-bottom: 1px solid var(--linha); }
td { padding: .5rem; border-bottom: 1px solid var(--linha); vertical-align: middle; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
.medidor { display: inline-block; width: 70px; height: 7px; background: var(--linha); border-radius: 4px; overflow: hidden; vertical-align: middle; margin-right: .4rem; }
.medidor i { display: block; height: 100%; background: var(--ok); }
.rolagem { overflow-x: auto; }
pre.texto { white-space: pre-wrap; font: .9rem/1.5 var(--fonte); background: var(--fundo); border: 1px solid var(--linha); border-radius: 8px; padding: .8rem 1rem; margin: 0; }

/* ---------- editor de áreas ---------- */
.editor { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .editor { grid-template-columns: 1fr; } }
.tela { position: sticky; top: 4.2rem; }
@media (max-width: 900px) { .tela { position: static; } }
/* a imagem nunca passa da altura da janela: os botões de desenho ficam sempre à vista, acima da barra de salvar */
.tela canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 17.5rem); min-height: 180px; margin: 0 auto; border-radius: var(--raio); background: #0b1418; touch-action: none; cursor: crosshair; }
.tela canvas:focus-visible { outline: 3px solid var(--acao); outline-offset: 3px; }
.tela .instrucao { margin: .6rem 0 0; min-height: 3em; }
.tela .ferramentas { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .4rem; }
.lista-areas { list-style: none; padding: 0; margin: 0 0 .75rem; }
.lista-areas li button { width: 100%; text-align: left; background: var(--papel); border: 1px solid var(--linha); border-left: 6px solid var(--cor); border-radius: 8px; padding: .55rem .75rem; margin-bottom: .4rem; cursor: pointer; color: var(--tinta); display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.lista-areas li button[aria-pressed="true"] { border-color: var(--cor); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cor) 35%, transparent); font-weight: 600; }
.modelos { display: grid; gap: .45rem; }
.modelos button { text-align: left; background: var(--papel); border: 1px solid var(--linha); border-radius: 8px; padding: .6rem .75rem; cursor: pointer; color: var(--tinta); }
.modelos button:hover { border-color: var(--acao); }
.modelos button b { display: block; }
.modelos button span { font-size: .85rem; color: var(--tinta-suave); line-height: 1.35; display: block; }
.regra { border: 1px solid var(--linha); border-radius: 8px; padding: .75rem .8rem .3rem; margin-bottom: .6rem; background: var(--fundo); }
.regra .cab { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.regra .desc { font-size: .85rem; color: var(--tinta-suave); margin: .15rem 0 .6rem; }
.regra .frase { display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: center; margin-bottom: .55rem; font-size: .95rem; }
.regra .frase input[type=number] { width: 5.2rem; }
.regra .frase input[type=time] { width: 7.4rem; }
.regra .frase select { width: auto; max-width: 100%; }
.regra .frase label { margin: 0; font-weight: 600; }
.barra-salvar { position: sticky; bottom: 0; background: var(--fundo); padding: .75rem 0 1rem; display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--linha); margin-top: 1rem; z-index: 5; }
@media (max-width: 640px) { .barra-salvar { bottom: 3.4rem; } }

/* ---------- entrada ---------- */
.topo .abas { margin-left: auto; }
.sair { background: none; border: 1px solid rgba(255,255,255,.3); color: inherit; font: inherit; font-size: .88rem; padding: .35rem .75rem; border-radius: 999px; cursor: pointer; opacity: .85; }
.sair:hover { opacity: 1; background: rgba(255,255,255,.1); }
.entrada { max-width: 24rem; margin: clamp(2rem, 9vh, 6rem) auto 0; background: var(--papel); border: 1px solid var(--linha); border-radius: 14px; padding: 1.75rem 1.5rem 1.5rem; }
.entrada h1 { font-size: 1.7rem; letter-spacing: -0.02em; margin-bottom: .4rem; }
.entrada > p { margin-bottom: 1.25rem; }
.botao.largo { width: 100%; padding: .7rem 1rem; font-size: 1rem; }
.msg-erro { color: var(--alerta); font-size: .92rem; min-height: 1.4em; margin: 0 0 .5rem; }
body.fora .abas { display: none; }

/* ---------- situação e avaliação dos alertas ---------- */
.selo { display: inline-block; font-size: .75rem; padding: .05rem .5rem; border-radius: 999px; border: 1px solid var(--linha); color: var(--tinta-suave); white-space: nowrap; vertical-align: 1px; }
.selo.vivo { border-color: var(--alerta); color: var(--alerta); font-weight: 600; }
.lista-alertas .texto { min-width: 0; }
.acoes-alerta { display: flex; align-items: center; gap: .6rem; }
.avaliar { display: flex; flex-direction: column; gap: .25rem; }
.avaliar button { font: inherit; font-size: .8rem; padding: .2rem .6rem; border-radius: 6px; border: 1px solid var(--linha); background: var(--papel); color: var(--tinta-suave); cursor: pointer; white-space: nowrap; }
.avaliar button:hover { border-color: var(--tinta-suave); color: var(--tinta); }
.avaliar button[aria-pressed="true"] { background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 600; }
.avaliar button.falso[aria-pressed="true"] { background: var(--alerta); border-color: var(--alerta); }
@media (max-width: 640px) {
  .lista-alertas li { grid-template-columns: 3.4rem 1fr; }
  .acoes-alerta { grid-column: 1 / -1; justify-content: space-between; }
  .avaliar { flex-direction: row; }
}
.areas li span.suave { font-size: .82rem; }
.areas li .selo.vivo { font-size: .72rem; }
.achadas { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }

/* ---------- assistente ---------- */
.trilha { list-style: none; display: flex; gap: .4rem; padding: 0; margin: 0 0 1.25rem; flex-wrap: wrap; counter-reset: passo; }
.trilha li { counter-increment: passo; display: flex; align-items: center; gap: .45rem; font-size: .9rem; color: var(--tinta-suave);
  padding: .35rem .8rem .35rem .4rem; border-radius: 999px; background: var(--papel); border: 1px solid var(--linha); }
.trilha li::before { content: counter(passo); display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--fundo); font-weight: 700; font-size: .8rem; }
.trilha li.atual { color: var(--tinta); border-color: var(--acao); font-weight: 600; }
.trilha li.atual::before { background: var(--acao); color: #fff; }
.trilha li.feito::before { content: "✓"; background: var(--ok); color: #fff; }
.passo h2 { margin-top: 0; }
.aparelhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: .5rem; margin-top: .75rem; }
.aparelho { text-align: left; background: var(--papel); border: 1.5px solid var(--linha); border-radius: 9px; padding: .65rem .8rem; cursor: pointer; color: var(--tinta); font: inherit; }
.aparelho:hover:not(:disabled) { border-color: var(--acao); }
.aparelho:disabled { opacity: .55; cursor: default; }
.aparelho b, .aparelho span { display: block; }
.aparelho span { font-size: .85rem; color: var(--tinta-suave); }
.outras-formas { margin-top: 1.5rem; border-top: 1px solid var(--linha); padding-top: .8rem; }
.outras-formas summary { cursor: pointer; font-weight: 600; margin-bottom: .6rem; }
.demo-chamada { margin-top: 1.5rem; padding: .9rem 1rem; border-radius: var(--raio); background: var(--fundo); display: flex; gap: .75rem 1rem;
  align-items: center; justify-content: space-between; flex-wrap: wrap; }
.demo-chamada p { margin: 0; }
.como { padding-left: 1.2rem; max-width: 62ch; } .como li { margin-bottom: .4rem; }
.sugestoes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .5rem; }
.sugestoes li { background: var(--fundo); border-radius: 8px; padding: .55rem .75rem; }
.sugestoes b, .sugestoes span { display: block; } .sugestoes span { font-size: .85rem; color: var(--tinta-suave); }
.faixa-aviso.demo { background: color-mix(in srgb, var(--noite) 12%, var(--papel)); border-color: color-mix(in srgb, var(--noite) 40%, var(--linha)); }

/* ---------- clipe, linha do tempo e mapa de calor ---------- */
.miniatura { border: 0; padding: 0; background: #0b1418; border-radius: 5px; cursor: pointer; position: relative; display: block; }
.miniatura span { display: grid; place-items: center; width: 78px; height: 54px; color: #fff; font-size: .8rem; }
.miniatura.com-clipe::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%);
  border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; filter: drop-shadow(0 0 3px rgba(0,0,0,.7)); }
.janela { border: 0; border-radius: 12px; padding: 1rem; max-width: min(92vw, 820px); width: 100%; background: var(--papel); color: var(--tinta); }
.janela::backdrop { background: rgba(5, 15, 20, .72); }
.janela .cab { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: .7rem; }
.janela .cab small { display: block; color: var(--tinta-suave); }
.janela video, .janela img { width: 100%; border-radius: 8px; background: #000; display: block; }
.linha-tempo { position: relative; padding-top: 1.2rem; }
.eixo-horas { position: absolute; top: 0; left: 7.5rem; right: 0; height: 1rem; }
.eixo-horas span { position: absolute; font-size: .72rem; color: var(--tinta-suave); transform: translateX(-50%); }
.faixa-camera { display: grid; grid-template-columns: 7rem 1fr; gap: .5rem; align-items: center; margin-bottom: .45rem; }
.faixa-camera small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trilho { position: relative; height: 26px; background: var(--fundo); border-radius: 5px; overflow: hidden; }
.trilho .presenca { position: absolute; top: 0; bottom: 0; width: calc(100% / 144); background: var(--tinta-suave); }
.trilho .presenca.fora { background: var(--noite); }
.trilho .marca { position: absolute; top: 4px; bottom: 4px; min-width: 6px; border: 0; border-radius: 3px; padding: 0; cursor: pointer; box-shadow: 0 0 0 1px var(--papel); }
.trilho .marca:hover, .trilho .marca:focus-visible { top: 1px; bottom: 1px; }
@media (max-width: 640px) { .faixa-camera { grid-template-columns: 1fr; gap: .15rem; } .eixo-horas { left: 0; } }
.mapas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
.mapas figure { margin: 0; }
.mapas img { width: 100%; border-radius: 8px; display: block; background: #0b1418; }
.mapas figcaption { font-size: .88rem; color: var(--tinta-suave); margin-top: .3rem; }
.abas-rel { margin-right: .5rem; display: inline-flex; background: var(--papel); border: 1px solid var(--linha); border-radius: 999px; padding: 3px; }
.abas-rel button { border: 0; background: none; color: var(--tinta); font: inherit; font-size: .92rem; padding: .35rem .9rem; border-radius: 999px; cursor: pointer; }
.abas-rel button[aria-pressed="true"] { background: var(--tinta); color: var(--fundo); font-weight: 600; }

/* ---------- equipe ---------- */
.equipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 1rem; }
.funcionario { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem 1.1rem; }
.funcionario.inativo { opacity: .65; }
.funcionario .cab { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; }
.funcionario h3 { margin-bottom: .1rem; }
.seg-mini { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: .5rem; margin-top: .9rem; }
.numeros div { background: var(--fundo); border-radius: 7px; padding: .4rem .6rem; }
.numeros small { display: block; font-size: .78rem; }
.numeros b { font-size: 1.05rem; }
.funcionario details { margin-top: .9rem; border-top: 1px solid var(--linha); padding-top: .6rem; }
.funcionario summary { cursor: pointer; font-weight: 600; }
.funcionario details .linha { margin-top: .5rem; }
.funcionario select { width: auto; max-width: 12rem; }
.fotos-preview { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.fotos-preview img { width: 56px; height: 64px; object-fit: cover; border-radius: 6px; }

/* ---------- unidades ---------- */
.unidades { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
.unidade { background: var(--papel); border: 1px solid var(--linha); border-left: 6px solid var(--ok); border-radius: var(--raio); padding: 1rem 1.1rem; }
.unidade.atencao { border-left-color: var(--alerta); }
.unidade.fora { border-left-color: var(--tinta-suave); }
.unidade h3 { margin-bottom: .2rem; }
.unidade p { margin-bottom: .5rem; }
.unidade ul { margin: 0 0 .6rem; padding-left: 1.1rem; font-size: .92rem; }

/* ---------- avisos rápidos ---------- */
#avisos { position: fixed; left: 50%; transform: translateX(-50%); bottom: 1.25rem; z-index: 60; display: grid; gap: .5rem; width: min(92vw, 30rem); pointer-events: none; }
#avisos div { background: #12303b; color: #f3f6f4; padding: .7rem 1rem; border-radius: 9px; box-shadow: 0 6px 24px rgba(0,0,0,.25); font-size: .95rem; border-left: 5px solid var(--ok); }
#avisos div.erro { border-left-color: #ff8377; }
@media (prefers-reduced-motion: no-preference) { #avisos div { animation: subir .18s ease-out; } @keyframes subir { from { transform: translateY(8px); opacity: 0; } } }

/* ---------- portal ---------- */
.kpis-portal { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; margin: 1.25rem 0; }
.kpi-p { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: .8rem 1rem; }
.kpi-p small { display: block; } .kpi-p b { font-family: var(--titulo); font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.lojas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 1rem; }
.loja { background: var(--papel); border: 1px solid var(--linha); border-left: 6px solid var(--ok); border-radius: var(--raio); padding: 1rem 1.1rem; }
.loja.fora { border-left-color: var(--alerta); } .loja.inativa { border-left-color: var(--tinta-suave); }
.loja h3 { margin-bottom: .15rem; } .loja .linha { margin-top: .6rem; }
.fotos-agora { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; margin-top: .6rem; }
.fotos-agora figure { margin: 0; } .fotos-agora img { width: 100%; border-radius: 6px; display: block; }
.fotos-agora figcaption { font-size: .8rem; color: var(--tinta-suave); }
.ev-mini { width: 96px; height: 64px; object-fit: cover; border-radius: 5px; background: #0b1418; }
.chave { font: 600 1.3rem/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .06em; background: var(--fundo);
  border: 1px dashed var(--acao); border-radius: 8px; padding: .6rem .9rem; display: inline-block; margin: .4rem 0; }
td .botao + .botao { margin-left: .3rem; }