/* =====================================================================================================================
   Contrô — camada visual v1.3 («Ordem e respiro») — PRÉVIA, 24/10/2026, base 1.5.170.
   SÓ APARÊNCIA: nenhum id, classe, permissão, texto de botão ou fluxo muda. É a ÚLTIMA folha carregada de cada página.
   Regras desta camada:
     1. Só desktop (>= 761px): o celular segue a mobile.css de sempre.
     2. Tudo pelos tokens do tema (--bg, --card-bg, --border, --text, --primary...): paleta, claro/escuro/noturno continuam valendo.
     3. Nada de `display:none` em controle, nada de `!important` em visibilidade (permissões mandam).
     4. Mínimo de 12 px em qualquer texto (a 1.5.170 tem 10–11 px em rótulos, selos e legendas).
   ===================================================================================================================== */
@media (min-width: 761px) {

:root {
  /* escala única de espaço, raio e sombra — antes cada tela tinha a sua */
  --v13-e1: 4px; --v13-e2: 8px; --v13-e3: 12px; --v13-e4: 16px; --v13-e5: 24px; --v13-e6: 32px;
  --v13-raio: 14px; --v13-raio-p: 9px;
  --v13-sombra-1: 0 1px 2px color-mix(in srgb, var(--text) 7%, transparent), 0 1px 1px color-mix(in srgb, var(--text) 4%, transparent);
  --v13-sombra-2: 0 8px 24px color-mix(in srgb, var(--text) 10%, transparent), 0 2px 6px color-mix(in srgb, var(--text) 6%, transparent);
  --v13-sombra-3: 0 24px 60px color-mix(in srgb, #000 30%, transparent), 0 4px 14px color-mix(in srgb, #000 16%, transparent);
  --v13-linha: color-mix(in srgb, var(--border) 70%, transparent);
  --v13-foco: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);
  --font-display: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, Arial, sans-serif;
}

/* ------------------------------------------------------------------------------------------------ 1. Tipografia */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-family: var(--font-display); font-size: 14px; line-height: 1.45; color: var(--text); }
h1 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
h2 { font-size: 15px; font-weight: 700; letter-spacing: -.005em; }
h3 { font-size: 14px; font-weight: 650; }
small, .muted, .hint, .ajuda { font-size: 12px; }
/* rótulos de campo, legendas e selos que estavam em 10–11 px */
label, .field > label, .field > span:first-child { font-size: 12.5px; font-weight: 600; color: var(--text-muted); letter-spacing: .005em; }
.badge, .tag, .selo, [class*="-selo"], [class*="chip"] { font-size: 12px; }
.sidebar-foot, .sidebar-versao { font-size: 12px; }
th { font-size: 12px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); }
td { font-size: 13.5px; }
.nav-label { font-size: 13.5px; }

/* ------------------------------------------------------------------------------------------------ 2. Barra lateral */
.sidebar { padding: var(--v13-e4) var(--v13-e3) var(--v13-e3); }
.sidebar-top { margin-bottom: var(--v13-e4); padding: 0 var(--v13-e2) var(--v13-e4); border-bottom: 1px solid color-mix(in srgb, #fff 9%, transparent); }
.marca-programa-icone { max-height: 46px; width: auto; max-width: 100%; }
.sidebar .nav-item {
  min-height: 42px; padding: 0 10px; margin: 2px 0; gap: 10px; border-radius: var(--v13-raio-p);
  font-weight: 550; letter-spacing: .002em; transition: background .12s ease, color .12s ease;
}
.sidebar .nav-item .nav-icon svg { width: 19px; height: 19px; }
.sidebar .nav-item.active { font-weight: 650; box-shadow: inset 3px 0 0 var(--marca-eletrico, var(--primary)); }
/* os três primeiros itens são a OPERAÇÃO do dia; o resto é gestão — uma linha fina separa, sem rótulo novo no DOM */
.sidebar .nav-item:nth-of-type(4) { margin-top: var(--v13-e3); position: relative; }
.sidebar .nav-item:nth-of-type(4)::before {
  content: ""; position: absolute; left: var(--v13-e3); right: var(--v13-e3); top: -7px; height: 1px; background: color-mix(in srgb, #fff 10%, transparent);
}
.sidebar-foot { margin: auto var(--v13-e1) 0; padding: var(--v13-e3); border: 1px solid color-mix(in srgb, #fff 10%, transparent); border-radius: var(--v13-raio-p); background: color-mix(in srgb, #fff 4%, transparent); line-height: 1.5; }
.sidebar-versao { margin-top: var(--v13-e2); opacity: .85; }

/* o menu segue com os 210 px de sempre (a câmera da Recepção não pode perder largura — regra da v1.5.111): rótulo longo quebra em 2 linhas em vez de ser cortado */
.sidebar .nav-label { min-width: 0; flex: 1 1 auto; white-space: normal; line-height: 1.2; overflow: visible; text-overflow: clip; }

/* ------------------------------------------------------------------------------------------------ 3. Barra de topo */
.topbar { gap: var(--v13-e3); min-height: 44px; flex-wrap: wrap; }
.topbar > h1, .topbar .rc-titulo { margin: 0; flex: 0 1 auto; }
.topbar-status { gap: var(--v13-e2); padding: 5px 6px 5px 12px; border: 1px solid var(--v13-linha); border-radius: 999px; background: var(--card-bg); font-size: 12.5px; color: var(--text-muted); }
.topbar-acoes { gap: var(--v13-e2); }
.topbar .tema-toggle-btn { width: 30px; height: 30px; border-radius: 50%; }
#auth-usuario-logado { display: inline-flex; align-items: center; gap: var(--v13-e2); padding: 4px 6px 4px 12px; border: 1px solid var(--v13-linha); border-radius: 999px; background: var(--card-bg); font-size: 12.5px; }
#auth-btn-sair { min-height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; }
.btn-avisos-topo, #rc-btn-ativos, .aparencia-rapida-gatilho, .btn-liberacao-manual { min-height: 38px; padding: 0 14px; border-radius: 10px; font-size: 13px; font-weight: 600; box-shadow: var(--v13-sombra-1); }

/* ------------------------------------------------------------------------------------------------ 4. Cartões, campos e botões */
.card { border-radius: var(--v13-raio); border: 1px solid var(--v13-linha); box-shadow: var(--v13-sombra-1); }
/* respiro maior só fora da Recepção: lá a câmera ocupa o que sobra da altura e não pode encolher */
body:not(.recepcao) .card { padding: var(--v13-e5); margin-bottom: var(--v13-e4); }
body:not(.recepcao) .topbar { margin-bottom: var(--v13-e5); }
.card > h2:first-child, .card > h3:first-child { margin: 0 0 var(--v13-e4); padding-bottom: var(--v13-e3); border-bottom: 1px solid var(--v13-linha); }
.card-rodape { margin-top: var(--v13-e4); padding-top: var(--v13-e3); border-top: 1px solid var(--v13-linha); display: flex; gap: var(--v13-e2); align-items: center; flex-wrap: wrap; }
.field { gap: 6px; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea {
  min-height: 40px; padding: 8px 12px; border-radius: var(--v13-raio-p); font-size: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 100%, var(--text) 6%); background: var(--card-bg);
  transition: border-color .12s ease, box-shadow .12s ease;
}
textarea { min-height: 76px; line-height: 1.45; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--primary); box-shadow: var(--v13-foco); }
::placeholder { color: var(--text-3); opacity: 1; }
button { font-family: inherit; font-size: 13.5px; font-weight: 600; min-height: 38px; padding: 0 16px; border-radius: var(--v13-raio-p); cursor: pointer; transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .06s ease; }
button:active { transform: translateY(1px); }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--v13-foco); }
button.primary { box-shadow: 0 1px 2px color-mix(in srgb, var(--primary) 40%, transparent); }
button.primary:hover { box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 32%, transparent); }
/* perigo: nunca um bloco vermelho gritando ao lado de «Reenviar» — contorno vermelho, preenche só ao passar o mouse */
button.danger { background: var(--card-bg); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border)); }
button.danger:hover { background: color-mix(in srgb, var(--danger) 10%, var(--card-bg)); border-color: var(--danger); }

/* coluna da direita da Recepção (Reconhecimento + Log): cartões mais compactos para a tabela caber sem rolar para o lado */

/* ------------------------------------------------------------------------------------------------ 5. Selos de estado (Entrada/Facial/Negado/Desligado...) */
.badge, .tag, .pill, [class*="badge-"], [class*="selo-"] { padding: 3px 9px; border-radius: 999px; font-weight: 650; line-height: 1.3; }

/* ------------------------------------------------------------------------------------------------ 6. Recepção (Cadastro) */
.rc-atalhos, .rc-acoes { gap: var(--v13-e2); }
.sym-box .titulo, .sym-box > h3, .sym-box > h2 { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
/* a similaridade deixa de ser uma caixa lisa que parece vazia: moldura tracejada enquanto espera a câmera */
.sym-box.sim { border-radius: var(--v13-raio); background: color-mix(in srgb, var(--surface-2) 70%, var(--card-bg)); border: 1px dashed color-mix(in srgb, var(--border) 100%, var(--text) 10%); padding: var(--v13-e4); }
.sym-box.cam { border-radius: var(--v13-raio); overflow: hidden; box-shadow: var(--v13-sombra-1); }
/* o log de acessos tinha barra de rolagem horizontal (texto da 2ª linha mais largo que a coluna): corta com reticências e mostra tudo no tooltip do navegador */
.log-scroll { overflow-x: hidden; }
.log-scroll .nome, .log-scroll .meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* listas de log: linhas mais altas, divisória suave, hora tabular */
#eventos-lista tr, .log-linha, .evento-linha { min-height: 52px; }
tbody tr { transition: background .1s ease; }
tbody tr:hover { background: color-mix(in srgb, var(--primary) 5%, var(--card-bg)); }
tbody td { padding-top: 11px; padding-bottom: 11px; border-bottom: 1px solid var(--v13-linha); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------------------------------------ 7. Janelas (popups) — UMA gramática: cabeça, corpo, rodapé */
.cropper-overlay { background: color-mix(in srgb, #0b1220 52%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.cropper-box, .fase1c-real-caixa, .dialogos-caixa, [class*="dialogo-caixa"] {
  border-radius: 18px; border: 1px solid var(--v13-linha); box-shadow: var(--v13-sombra-3); background: var(--card-bg);
  padding: 0; overflow: hidden; max-height: min(88vh, 860px); display: flex; flex-direction: column;
}
.fase1c-real-cab, .cropper-box > h3:first-child, .cropper-box > .cab {
  display: flex; align-items: center; justify-content: space-between; gap: var(--v13-e3);
  padding: var(--v13-e4) var(--v13-e5); margin: 0; border-bottom: 1px solid var(--v13-linha);
  background: color-mix(in srgb, var(--surface-2) 55%, var(--card-bg)); cursor: grab;
}
.fase1c-real-cab h3 { margin: 0; font-size: 16px; font-weight: 700; }
.fase1c-real-cab button, #popup-pessoa-fechar { width: 34px; min-height: 34px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; }
.cropper-box > *:not(.fase1c-real-cab):not(h3:first-child) { margin-left: var(--v13-e5); margin-right: var(--v13-e5); }
.fase1c-real-caixa > #popup-pessoa-conteudo, .fase1c-real-caixa > div:not(.fase1c-real-cab) { overflow-y: auto; }

/* 7a. Detalhe da pessoa: foto + dados lado a lado, ações em grupo, zona de perigo separada */
#popup-pessoa-conteudo { padding: var(--v13-e5); margin: 0 !important; display: grid; grid-template-columns: 112px 1fr; gap: 10px var(--v13-e5); align-items: start; min-width: 0; }
.fase1c-real-caixa:has(#popup-pessoa-conteudo) { width: min(600px, 92vw); max-width: 92vw; }
#popup-pessoa-conteudo > div { margin: 0; min-width: 0; }
#popup-pessoa-conteudo > div:nth-child(1) { grid-column: 1 / -1; display: grid; grid-template-columns: 112px 1fr; gap: var(--v13-e5); align-items: center; padding-bottom: var(--v13-e4); margin-bottom: var(--v13-e2); border-bottom: 1px solid var(--v13-linha); }
#popup-pessoa-conteudo .avatar-vazio, #popup-pessoa-conteudo > div:nth-child(1) > img { width: 112px; height: 112px; border-radius: var(--v13-raio); object-fit: cover; background: var(--surface-2); border: 1px solid var(--v13-linha); }
#popup-pessoa-conteudo > div:nth-child(1) > div:last-child { display: flex; flex-direction: column; gap: 4px; }
#popup-pessoa-conteudo > div:nth-child(1) > div:last-child > div:first-child { font-size: 20px; font-weight: 750; letter-spacing: -.01em; }
#popup-pessoa-conteudo > div:nth-child(2) { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--v13-e2); }
#popup-pessoa-conteudo > div:nth-child(2) button { min-height: 34px; padding: 0 12px; font-size: 13px; }
#popup-pessoa-conteudo > div:nth-child(n+3):not(.pessoa-card-equipamentos):not(.pessoa-card-status) { grid-column: 1 / -1; font-size: 13.5px; }
#popup-pessoa-conteudo > div:nth-child(n+3) strong { color: var(--text-muted); font-weight: 600; margin-right: 4px; }
#popup-pessoa-conteudo .pessoa-card-equipamentos, #popup-pessoa-conteudo .pessoa-card-status { grid-column: 1 / -1; padding: var(--v13-e3) var(--v13-e4); border-radius: var(--v13-raio-p); background: var(--surface-2); font-size: 13px; }
/* a linha «Equipamentos — Reenviar / Remover de todos»: o perigo vai para a direita, com respiro */
#popup-pessoa-conteudo > div:has(.pessoa-card-remover-todos) { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--v13-e3); margin-top: var(--v13-e2); padding-top: var(--v13-e3); border-top: 1px solid var(--v13-linha); }
#popup-pessoa-conteudo > div:has(.pessoa-card-remover-todos) > span { display: inline-flex; flex-wrap: wrap; gap: var(--v13-e2); }

/* 7b. Caixas de diálogo (Dialogos.*) */
.dialogos-caixa, [class*="dialogo-caixa"] { min-width: 380px; max-width: 520px; }

/* ------------------------------------------------------------------------------------------------ 8. Gavetas (Configurações e Status do dia) */
.cfg-gaveta-painel, .rc-gaveta-painel { box-shadow: var(--v13-sombra-3); border-radius: 18px 0 0 18px; width: min(680px, 94vw) !important; }
.cfg-gaveta-cabeca { padding: var(--v13-e5) var(--v13-e5) var(--v13-e4); gap: var(--v13-e4); align-items: center; border-bottom: 1px solid var(--v13-linha); background: color-mix(in srgb, var(--surface-2) 45%, var(--card-bg)); position: sticky; top: 0; z-index: 3; }
.cfg-gaveta-contexto { font-size: 11.5px; letter-spacing: .09em; margin-bottom: 2px; }
.cfg-gaveta-cabeca h2 { font-size: 19px; margin: 0; border: 0; padding: 0; }
.cfg-gaveta-icone { width: 44px; height: 44px; border-radius: 12px; }
.cfg-gaveta-corpo { padding: var(--v13-e5); gap: var(--v13-e4); }
.cfg-gaveta-corpo > .card { padding: var(--v13-e4) var(--v13-e5); box-shadow: none; }
.cfg-gaveta-corpo > .card:only-child { border: 0; padding: 0; background: transparent; }
.cfg-gaveta-corpo > .card:only-child > h2:first-child { font-size: 11.5px; color: var(--text-muted); border: 0; padding: 0; margin: 0 0 var(--v13-e2); }   /* o título já está na cabeça da gaveta: fica discreto, NUNCA some do DOM nem da tela */
.cfg-gaveta-corpo > .card:not(:only-child) > h2:first-child { font-size: 14px; }
.rc-gaveta-fechar { top: var(--v13-e4); right: var(--v13-e4); }

/* ------------------------------------------------------------------------------------------------ 9. Configurações: categorias, grupos e atalhos */
.cfg-categorias { padding: 6px; gap: 4px; border-radius: 14px; margin-bottom: var(--v13-e5); }
.cfg-categoria { min-height: 40px; padding: 8px 10px; font-size: 13px; gap: 6px; border-radius: 10px; }
.cfg-categoria svg { width: 17px; height: 17px; }
.cfg-atalhos-titulo { margin-bottom: var(--v13-e5); }
.cfg-atalhos-titulo h2, .cfg-categoria-cabeca h2 { font-size: 20px; border: 0; padding: 0; margin: 0; }
.cfg-categoria-resumo { font-size: 13.5px; color: var(--text-muted); }
/* títulos de grupo («FACIAIS», «CONEXÃO E HORÁRIO»...) — hoje minúsculos e apagados */
.cfg-grupo-titulo, .cfg-atalhos-grupo > h3, [class*="cfg-grupo"] > h3 { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin: var(--v13-e5) 0 var(--v13-e3); display: flex; align-items: center; gap: var(--v13-e3); }
.cfg-grupo-titulo::after, [class*="cfg-grupo"] > h3::after { content: ""; flex: 1; height: 1px; background: var(--v13-linha); }
.cfg-atalho { border-radius: var(--v13-raio); border: 1px solid var(--v13-linha); box-shadow: var(--v13-sombra-1); padding: var(--v13-e4); min-height: 88px; }
.cfg-atalho:hover, .cfg-atalho:focus-visible { box-shadow: var(--v13-sombra-2); transform: translateY(-1px); }
.cfg-atalho-icone { width: 42px; height: 42px; border-radius: 12px; }
.cfg-atalho-texto b { font-size: 14.5px; }
.cfg-atalho-texto small { font-size: 12.5px; line-height: 1.4; }
.cfg-atalho-texto em { font-size: 12px; }
/* o que apaga dado ou é irreversível ganha uma borda vermelha discreta na lateral — dá para achar de relance */
.cfg-atalho[data-risco], .cfg-atalho.perigo, .cfg-atalho[class*="perigo"] { border-left: 3px solid var(--danger); }

/* ------------------------------------------------------------------------------------------------ 10. Unidade / Blocos / Painel / Vídeos */
#unidade-abas, .unidade-abas, .abas, [role=tablist] { display: flex; gap: 2px; padding: 4px; border: 1px solid var(--v13-linha); border-radius: 12px; background: var(--card-bg); flex-wrap: wrap; box-shadow: var(--v13-sombra-1); }
#unidade-abas button, .unidade-abas button, .abas button, [role=tab] { min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--text-muted); font-size: 13.5px; font-weight: 600; box-shadow: none; }
#unidade-abas button.active, .unidade-abas button.active, .abas button.active, [role=tab][aria-selected=true] { background: var(--text); color: var(--card-bg); }
.bloco-card, .card-bloco { border-radius: var(--v13-raio); padding: var(--v13-e4); }
.painel-indicador, .kpi, [class*="indicador"] { border-radius: var(--v13-raio); }
.videos-cartao, .video-card { border-radius: var(--v13-raio); overflow: hidden; box-shadow: var(--v13-sombra-1); border: 1px solid var(--v13-linha); }

/* ------------------------------------------------------------------------------------------------ 11. Acessibilidade e movimento */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
::selection { background: color-mix(in srgb, var(--primary) 30%, transparent); }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 28%, transparent) transparent; }

}