/* Recepção — tela de Cadastro em formato de portaria (14/10/2026, ver js/recepcao.js).
   Só vale com body.recepcao. Regras de sempre desta tela:
     • a câmera NÃO encolhe: a linha de controles da 1B (Status do dia / Log de acessos) sai de
       cima do formulário e o Status vai para a gaveta "Ativos" — sobra altura, não falta;
     • na largura, a coluna da direita cresce para caber o log em colunas, e a câmera ganha
       peso maior que a caixa de similaridade, para não perder largura;
     • não redefinir .hidden, permissões nem a geometria interna da foto/câmera. */

/* ---- Topo: título + atalhos de portaria ---- */
body.recepcao .main > .topbar { align-items: center; }
body.recepcao .rc-titulo { margin: 0 14px 0 0; font-size: 20px; font-weight: 700; color: var(--text); white-space: nowrap; }
body.recepcao .topbar-status { margin-right: auto; font-size: 12px; color: var(--text-muted); }
body.recepcao .topbar-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.recepcao .rc-atalhos { display: flex; align-items: center; gap: 8px; }
body.recepcao .rc-acao {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 7px 12px; box-sizing: border-box;
  color: var(--text); background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
}
body.recepcao .rc-acao:hover,
body.recepcao .rc-acao[aria-expanded="true"] { border-color: var(--primary); background: var(--accent-dim); color: var(--accent-text); }
body.recepcao .rc-acao svg { width: 16px; height: 16px; }
body.recepcao .rc-contador {
  min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: var(--primary-fg); font-size: 11px; font-weight: 700;
}

/* ---- Duas colunas: Novo acesso | Reconhecimento + Log ---- */
body.recepcao .cad-layout { grid-template-columns: minmax(0, 1fr) minmax(400px, min(38%, 520px)); }
body.recepcao .fase1b-panels-toolbar { display: none !important; }
body.recepcao .cad-layout-right { gap: 14px; }
body.recepcao .cad-layout-right > .rc-ultimo { flex: none; }
body.recepcao .cad-layout-right > .log-lateral { flex: 1; }
body.recepcao .cam-triple .sym-box.cam { flex: 1.5; }
body.recepcao .cam-triple .sym-box.sim { flex: 1; }
body.recepcao .form-card > .field-label:first-child { color: var(--text); } /* tamanho NÃO muda: +1 px aqui já empurrava a câmera */

/* ---- Cartão "Reconhecimento facial" (último acesso) ---- */
body.recepcao .rc-ultimo h3 { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
body.recepcao .rc-vazio { margin: 0; color: var(--text-muted); font-size: 13px; }
body.recepcao .rc-ultimo-pessoa { display: flex; gap: 14px; align-items: flex-start; border-radius: 10px; }
body.recepcao .rc-ultimo-pessoa.clicavel { cursor: pointer; }
body.recepcao .rc-ultimo-pessoa.clicavel:hover .rc-ultimo-nome { color: var(--accent-text); }
body.recepcao .rc-ultimo-foto img,
body.recepcao .rc-ultimo-foto .avatar-vazio {
  width: 76px; height: 76px; border-radius: 50%; object-fit: cover; display: block;
  background: var(--surface-2); border: 1px solid var(--border); cursor: zoom-in;
}
body.recepcao .rc-ultimo-foto .avatar-vazio { cursor: default; }
body.recepcao .rc-ultimo-info { flex: 1; min-width: 0; }
body.recepcao .rc-ultimo-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
body.recepcao .rc-ultimo-nome { font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.25; overflow-wrap: anywhere; }
body.recepcao .rc-ultimo-categoria { margin-top: 2px; font-size: 13px; color: var(--text-muted); }
body.recepcao .rc-ultimo-dados { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.1fr); gap: 8px 12px; margin: 12px 0 0; }
body.recepcao .rc-ultimo-dados dt { font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
body.recepcao .rc-ultimo-dados dd { margin: 2px 0 0; font-size: 12.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }

/* ---- Log de acessos em colunas ---- */
body.recepcao .rc-cabecalho,
body.recepcao .rc-linha { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.25fr) minmax(92px, .95fr); gap: 10px; }
body.recepcao .rc-cabecalho {
  margin-top: 10px; padding: 8px 6px; border-radius: 8px; background: var(--surface-2);
  font-size: 11px; font-weight: 700; color: var(--text-muted);
}
body.recepcao .rc-linha { align-items: center; padding: 9px 6px; border-bottom: 1px solid var(--border); }
body.recepcao .rc-linha:nth-child(even) { background: transparent; }
body.recepcao .rc-linha.clicavel { cursor: pointer; }
body.recepcao .rc-linha.clicavel:hover { background: var(--accent-dim); }
body.recepcao .rc-col { min-width: 0; font-size: 12px; line-height: 1.35; }
body.recepcao .rc-identificacao { display: flex; align-items: center; gap: 9px; }
body.recepcao .rc-identificacao img,
body.recepcao .rc-identificacao .avatar-vazio { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; }
body.recepcao .rc-linha .info { min-width: 0; }
body.recepcao .rc-linha .nome { font-size: 12.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.recepcao .rc-linha .meta,
body.recepcao .rc-unidade .meta { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.recepcao .rc-forte { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.recepcao .rc-hora { color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
body.recepcao .rc-selos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
body.recepcao .rc-selos .badge { margin: 0; }

/* Entrada / Saída: etiqueta contornada, como a da portaria */
body.recepcao .rc-direcao {
  display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 5px;
  border: 1px solid currentColor; font-size: 10.5px; font-weight: 600; line-height: 1.4; background: transparent;
}
body.recepcao .rc-direcao.entrada { color: var(--green-text); }
body.recepcao .rc-direcao.saida { color: color-mix(in srgb, #2563eb 70%, var(--text)); }
body.recepcao .rc-direcao.ambos { color: var(--text-muted); }

/* ---- Gaveta do Status de cadastro do dia ---- */
.rc-gaveta { position: fixed; inset: 0; z-index: 2200; }
.rc-gaveta-fundo { position: absolute; inset: 0; background: rgba(32, 39, 52, .30); animation: rc-fade .14s ease both; }
html[data-tema="escuro"] .rc-gaveta-fundo, html[data-tema="noturno"] .rc-gaveta-fundo { background: rgba(0, 0, 0, .5); }
.rc-gaveta-painel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, calc(100vw - 24px)); box-sizing: border-box;
  display: flex; flex-direction: column; padding: 14px; background: var(--bg);
  box-shadow: -12px 0 32px color-mix(in srgb, var(--text) 18%, transparent);
  animation: rc-entrar .18s ease both;
}
.rc-gaveta-fechar { position: absolute; top: 18px; right: 20px; z-index: 2; }
.rc-gaveta-painel > .ativos-card { flex: 1; min-height: 0; margin: 0; display: flex; flex-direction: column; padding-right: 16px; }
.rc-gaveta-painel > .ativos-card > div:first-child { padding-right: 36px; }
.rc-gaveta-painel .ativos-panel.active { flex: 1; min-height: 0; display: flex; flex-direction: column; }
@keyframes rc-fade { from { opacity: 0; } }
@keyframes rc-entrar { from { transform: translateX(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rc-gaveta-fundo, .rc-gaveta-painel { animation: none; } }

/* ---- Telas estreitas: empilha (mesma quebra do layout original) ---- */
@media (max-width: 1100px) {
  body.recepcao .cad-layout { grid-template-columns: 1fr; }
  body.recepcao .rc-atalhos .rc-acao span:not(.rc-contador) { display: none; }
}

/* ---- Recolher Reconhecimento + Log (16/10/2026): o Cadastro ocupa a largura e sobra uma faixa
   fina à direita para reabrir. Os quadros continuam no DOM (escondidos só visualmente), então o
   Log segue atualizando e a regra de permissão (display do Log) continua valendo. ---- */
body.recepcao .rc-ultimo { position: relative; }
.rc-recolher {
  position: absolute; top: 10px; right: 12px; z-index: 1;
  width: 30px; height: 30px; min-height: 0 !important; padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); box-shadow: none;
  color: var(--text-muted); cursor: pointer;
}
.rc-recolher:hover { color: var(--accent-text); border-color: var(--primary); transform: none; }
.rc-recolher:focus-visible, .rc-trilho:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.rc-trilho { display: none; }
@media (min-width: 1101px) {
  body.recepcao .cad-layout.rc-paineis-recolhidos { grid-template-columns: minmax(0, 1fr) 46px; }
  body.recepcao .rc-paineis-recolhidos .cad-layout-right { position: relative; }
  body.recepcao .rc-paineis-recolhidos .cad-layout-right > .card {
    position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important;
    padding: 0 !important; border: 0 !important; overflow: hidden !important; clip-path: inset(50%); pointer-events: none;
  }
  body.recepcao .rc-paineis-recolhidos .rc-trilho {
    display: flex; flex-direction: column; align-items: center; gap: 12px; flex: 1; width: 46px; min-height: 0;
    padding: 14px 0; margin: 0; border: 1px solid var(--border); border-radius: 12px;
    background: var(--card-bg); color: var(--text-muted); box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 5%, transparent); cursor: pointer;
  }
  body.recepcao .rc-trilho:hover { color: var(--accent-text); border-color: var(--primary); transform: none; }
  .rc-trilho-texto { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
  .rc-trilho-ponto { display: none; width: 10px; height: 10px; border-radius: 50%; background: var(--marca-eletrico, var(--primary)); animation: rc-pulso 1.6s ease-in-out infinite; }
  .rc-trilho-novo .rc-trilho-ponto { display: block; }
  .rc-trilho-novo { border-color: var(--marca-eletrico, var(--primary)) !important; color: var(--text) !important; }
  .rc-trilho-aviso { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@keyframes rc-pulso { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--marca-eletrico, #64AEFF) 25%, transparent); } }
@media (prefers-reduced-motion: reduce) { .rc-trilho-ponto { animation: none; } }
@media (max-width: 1100px) { .rc-recolher { display: none; } }