/* ==========================================================================
   Check-in de Salas de Almoço — folha de estilo base.
   As cores e a tipografia vêm da IDV, injetadas como variáveis CSS
   (--cor-primaria, --cor-secundaria, --cor-texto, --cor-fundo,
    --cor-destaque, --fonte, --radio).
   ========================================================================== */

:root {
  --cor-primaria: #0b5cff;
  --cor-secundaria: #172033;
  --cor-texto: #172033;
  --cor-fundo: #f6f7f9;
  --cor-destaque: #168a4f;
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --radio: 12px;

  --branco: #fff;
  --borda: #e2e7ef;
  --borda-forte: #cfd7e3;
  --suave: #f2f5f9;
  --texto-fraco: #5c6a80;
  --erro: #c8372d;
  --erro-fundo: #fdecea;
  --ok-fundo: #e7f6ee;
  --aviso: #a06104;
  --aviso-fundo: #fef4e2;
  --sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px -12px rgba(16, 24, 40, .12);
  --sombra-forte: 0 12px 40px -12px rgba(16, 24, 40, .28);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .6rem; }
h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: 1.15rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; }
p { margin: 0 0 .8rem; }
a { color: var(--cor-primaria); }
small { font-size: .82rem; }

.sr, .pular:not(:focus) {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.pular:focus {
  position: static; width: auto; height: auto; display: inline-block;
  padding: 10px 14px; background: var(--cor-primaria); color: #fff;
}

/* --------------------------------------------------------------- cabeçalho */
.cabecalho {
  background: var(--branco);
  border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; z-index: 40;
}
.cabecalho-linha {
  max-width: 1240px; margin: auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 16px;
}
.marca { display: inline-flex; align-items: center; text-decoration: none; margin-right: auto; }
.marca > img { max-height: 40px; max-width: 230px; width: auto; display: block; }
.marca-texto {
  font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em;
  color: var(--cor-secundaria); text-transform: uppercase;
}
.cabecalho-direita { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.seletor-evento select {
  margin: 0; padding: 7px 10px; font-size: .85rem;
  border-radius: 8px; background: var(--suave); border: 1px solid var(--borda);
  max-width: 230px;
}
.etiqueta-sala {
  background: var(--suave); border: 1px solid var(--borda);
  padding: 6px 12px; border-radius: 999px; font-size: .82rem; font-weight: 600;
}
.usuario { display: flex; align-items: center; gap: 9px; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--cor-primaria); color: #fff;
  display: grid; place-items: center; font-size: .78rem; font-weight: 800;
}
.usuario-info { display: flex; flex-direction: column; line-height: 1.15; }
.usuario-info small { color: var(--texto-fraco); font-size: .75rem; }

.menu-botao { display: none; }

/* -------------------------------------------------------------- navegação */
.navegacao {
  max-width: 1240px; margin: auto; padding: 0 20px;
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: thin;
}
.nav-item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 13px; text-decoration: none; white-space: nowrap;
  color: var(--texto-fraco); font-size: .88rem; font-weight: 600;
  border-bottom: 2.5px solid transparent;
}
.nav-item svg { width: 17px; height: 17px; flex: none; }
.nav-item:hover { color: var(--cor-texto); background: var(--suave); }
.nav-item.ativo { color: var(--cor-primaria); border-bottom-color: var(--cor-primaria); }

/* ---------------------------------------------------------------- conteúdo */
.conteudo { max-width: 1240px; margin: auto; padding: 24px 20px 60px; }
.publico-conteudo { max-width: 720px; margin: auto; padding: 32px 18px 60px; }
.publico-conteudo.largo { max-width: 1000px; }
.banner-publico { background: var(--branco); border-bottom: 1px solid var(--borda); }
.banner-publico img { display: block; width: 100%; max-height: 220px; object-fit: cover; }

.rodape {
  border-top: 1px solid var(--borda); color: var(--texto-fraco);
  font-size: .82rem; padding: 18px 20px; text-align: center;
}

/* -------------------------------------------------------- títulos de tela */
.titulo-tela {
  display: flex; align-items: flex-start; gap: 14px;
  flex-wrap: wrap; margin-bottom: 20px;
}
.titulo-tela > div:first-child { flex: 1 1 320px; }
.titulo-tela .sub { color: var(--texto-fraco); margin: 0; font-size: .92rem; }

/* ---------------------------------------------------------------- painéis */
.painel {
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: var(--radio); padding: 20px; margin-bottom: 18px;
  box-shadow: var(--sombra);
}
.painel > h2:first-child, .painel > h3:first-child { margin-top: 0; }
.painel-cabecalho {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: -4px 0 16px;
}
.painel-cabecalho h2, .painel-cabecalho h3 { margin: 0; flex: 1 1 auto; }

.grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grade-2 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grade-3 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* --------------------------------------------------------------- cartões */
.cartao {
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: var(--radio); padding: 16px 18px; box-shadow: var(--sombra);
}
.cartao-valor { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.cartao-rotulo { color: var(--texto-fraco); font-size: .84rem; font-weight: 600; }
.cartao-extra { margin-top: 6px; font-size: .78rem; color: var(--texto-fraco); }
.cartao-ok .cartao-valor { color: var(--cor-destaque); }
.cartao-primaria .cartao-valor { color: var(--cor-primaria); }
.cartao-erro .cartao-valor { color: var(--erro); }

/* --------------------------------------------------------------- formulários */
label { display: block; font-weight: 600; font-size: .86rem; margin: 0 0 14px; }
label > span.dica { display: block; font-weight: 400; color: var(--texto-fraco); font-size: .78rem; margin-top: 3px; }
input, select, textarea {
  width: 100%; padding: 10px 12px; font: inherit; font-size: .92rem;
  color: var(--cor-texto); background: var(--branco);
  border: 1px solid var(--borda-forte); border-radius: 9px; margin-top: 5px;
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-primaria) 18%, transparent);
}
input[type=checkbox], input[type=radio] { width: auto; margin: 0 7px 0 0; vertical-align: -2px; }
input[type=color] { padding: 4px; height: 42px; cursor: pointer; }
input[type=file] { padding: 8px; background: var(--suave); }
fieldset { border: 1px solid var(--borda); border-radius: var(--radio); padding: 16px; margin: 0 0 18px; }
legend { font-weight: 700; font-size: .88rem; padding: 0 6px; }
.linha { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.linha-3 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.marcacao { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; font-size: .86rem; margin-bottom: 12px; }
.marcacao input { margin-top: 3px; }
.marcacao span.dica { font-weight: 400; }

/* ---------------------------------------------------------------- botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid transparent; border-radius: 9px; padding: 10px 16px;
  background: var(--cor-primaria); color: #fff; font: inherit;
  font-size: .89rem; font-weight: 600; text-decoration: none;
  cursor: pointer; white-space: nowrap;
}
.btn:hover { filter: brightness(.93); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }
.btn.sec { background: var(--cor-secundaria); }
.btn.contorno { background: var(--branco); color: var(--cor-texto); border-color: var(--borda-forte); }
.btn.fantasma { background: transparent; color: var(--texto-fraco); border-color: transparent; padding: 8px 10px; }
.btn.fantasma:hover { background: var(--suave); color: var(--cor-texto); filter: none; }
.btn.perigo { background: var(--erro); }
.btn.sucesso { background: var(--cor-destaque); }
.btn.pequeno { padding: 6px 11px; font-size: .81rem; }
.btn.grande { padding: 14px 22px; font-size: 1rem; }
.btn.bloco { width: 100%; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.acoes-fim { justify-content: flex-end; }
.acoes form { margin: 0; }

/* ---------------------------------------------------------------- tabelas */
.tabela-rolagem { overflow-x: auto; margin: 0 -20px -20px; padding: 0 20px 20px; }
table.tabela { width: 100%; border-collapse: collapse; font-size: .89rem; }
.tabela th {
  text-align: left; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--texto-fraco);
  padding: 10px 12px; border-bottom: 1px solid var(--borda); white-space: nowrap;
}
.tabela td { padding: 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tbody tr:hover { background: var(--suave); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela .principal { font-weight: 600; }
.tabela .secundario { color: var(--texto-fraco); font-size: .82rem; }
.vazio { text-align: center; color: var(--texto-fraco); padding: 34px 12px; }

/* ---------------------------------------------------------- etiquetas/alertas */
.etiqueta {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .76rem; font-weight: 700; white-space: nowrap;
}
.etiqueta.ok { background: var(--ok-fundo); color: #0f6b40; }
.etiqueta.erro { background: var(--erro-fundo); color: #a12a22; }
.etiqueta.info { background: #e8effe; color: #14448f; }
.etiqueta.aviso { background: var(--aviso-fundo); color: var(--aviso); }
.etiqueta.neutra { background: var(--suave); color: var(--texto-fraco); }

.alerta {
  padding: 12px 15px; border-radius: 10px; margin-bottom: 16px;
  font-size: .89rem; border: 1px solid transparent;
}
.alerta.ok { background: var(--ok-fundo); color: #0f6b40; border-color: #bfe6d1; }
.alerta.erro { background: var(--erro-fundo); color: #a12a22; border-color: #f3c9c5; }
.alerta.aviso { background: var(--aviso-fundo); color: var(--aviso); border-color: #f3ddb4; }
.alerta.info { background: #eef3fe; color: #14448f; border-color: #cddcfa; }

/* ------------------------------------------------------------ progresso */
.barra { height: 8px; background: var(--suave); border-radius: 999px; overflow: hidden; }
.barra > span { display: block; height: 100%; background: var(--cor-primaria); border-radius: 999px; }
.barra.cheia > span { background: var(--erro); }

/* ------------------------------------------------------------- leitor QR */
.leitor { max-width: 760px; margin: auto; }
.leitor-video {
  position: relative; background: #0c0f14; border-radius: var(--radio);
  overflow: hidden; aspect-ratio: 4 / 3;
}
.leitor-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.leitor-mira {
  position: absolute; inset: 12%; border-radius: 16px;
  box-shadow: 0 0 0 100vmax rgba(8, 11, 16, .45);
  border: 2px solid rgba(255, 255, 255, .85);
}
.leitor-mira::before, .leitor-mira::after {
  content: ''; position: absolute; left: 0; right: 0; height: 2px;
  background: var(--cor-destaque); opacity: .9;
}
.leitor-mira::before { top: 0; animation: varre 2.4s ease-in-out infinite; }
.leitor-mira::after { display: none; }
@keyframes varre { 0%, 100% { top: 4%; } 50% { top: 96%; } }
@media (prefers-reduced-motion: reduce) { .leitor-mira::before { animation: none; } }

.leitor-status {
  padding: 14px 16px; border-radius: 10px; font-weight: 600;
  background: var(--suave); margin: 14px 0;
}
.leitor-status.ok { background: var(--ok-fundo); color: #0f6b40; }
.leitor-status.erro { background: var(--erro-fundo); color: #a12a22; }
.leitor-status.aviso { background: var(--aviso-fundo); color: var(--aviso); }
.leitor-status .nome { display: block; font-size: 1.25rem; font-weight: 800; }
.leitor-status .detalhe { display: block; font-weight: 400; font-size: .86rem; margin-top: 2px; }
.leitor-recentes { list-style: none; margin: 0; padding: 0; }
.leitor-recentes li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--borda); font-size: .87rem;
}
.leitor-recentes li:last-child { border-bottom: 0; }

/* ------------------------------------------------------------- credencial */
.credencial {
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: 18px; overflow: hidden; box-shadow: var(--sombra-forte);
  max-width: 420px; margin: 0 auto 20px;
}
.credencial-topo {
  padding: 18px 20px; color: #fff;
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-secundaria));
  display: flex; align-items: center; gap: 14px; justify-content: space-between;
}
.credencial-topo-texto { min-width: 0; }
/* Pastilha branca para a marca do patrocinador: o topo é escuro e não há como
   saber se a marca do patrocinador é clara ou escura. */
.marca-patrocinador {
  background: #fff; border-radius: 8px; padding: 7px 10px; flex: none;
  display: inline-flex; align-items: center;
}
.marca-patrocinador img { display: block; max-width: 130px; width: auto; }
@media (max-width: 420px) {
  .credencial-topo { flex-wrap: wrap; }
  .marca-patrocinador img { max-width: 110px; }
}
.credencial-topo img { max-height: 40px; max-width: 170px; display: block; margin-bottom: 10px; }
.credencial-topo .evento { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; opacity: .9; }
.credencial-corpo { padding: 22px 20px; text-align: center; }
.credencial-nome { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 2px; }
.credencial-empresa { color: var(--texto-fraco); font-size: .9rem; margin-bottom: 16px; }
.credencial-qr { background: #fff; padding: 12px; border-radius: 14px; display: inline-block; border: 1px solid var(--borda); }
.credencial-qr img { display: block; width: 240px; height: 240px; image-rendering: pixelated; }
.credencial-sala {
  margin-top: 16px; padding: 12px; border-radius: 10px;
  background: var(--suave); font-weight: 700;
}
.credencial-sala small { display: block; font-weight: 500; color: var(--texto-fraco); }

@media print {
  body { background: #fff; }
  .cabecalho, .navegacao, .rodape, .nao-imprimir, .banner-publico { display: none !important; }
  .credencial { box-shadow: none; border: 1px solid #999; max-width: 100%; }
  .publico-conteudo, .conteudo { padding: 0; max-width: 100%; }
}

/* ---------------------------------------------------------------- login */
.caixa-login { max-width: 420px; margin: 6vh auto; }
.caixa-login .marca-login { text-align: center; margin-bottom: 22px; }
.caixa-login .marca-login > img { max-height: 62px; max-width: 250px; }
.caixa-login .marca-login .marcas img { max-height: 58px; }
.caixa-login .marca-login .titulo { font-size: 1.2rem; font-weight: 800; }
.caixa-login .painel { padding: 26px; }

/* ------------------------------------------------------ pré-visualização IDV */
.previa {
  border: 1px solid var(--borda); border-radius: var(--radio);
  overflow: hidden; background: var(--branco);
}
.previa-topo { padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.previa-corpo { padding: 16px; border-top: 1px solid var(--borda); }
.amostra-cor { width: 100%; height: 34px; border-radius: 8px; border: 1px solid var(--borda); }
.miniatura {
  max-height: 56px; max-width: 100%; background: var(--suave);
  border: 1px solid var(--borda); border-radius: 8px; padding: 6px;
}

/* --------------------------------------------------------------- utilidades */
.dois-cols { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.fraco { color: var(--texto-fraco); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; }
.centro { text-align: center; }
.nada-margem { margin: 0; }
.espaco { margin-top: 16px; }
.quebra { word-break: break-all; }
.pilha { display: flex; flex-direction: column; gap: 4px; }
.fita {
  display: inline-flex; align-items: center; gap: 6px; font-size: .8rem;
  color: var(--texto-fraco); background: var(--suave); padding: 4px 10px; border-radius: 999px;
}

/* --------------------------------------------------------------- responsivo */
@media (max-width: 900px) {
  .dois-cols { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  h1 { font-size: 1.35rem; }
  .cabecalho-linha { padding: 10px 14px; flex-wrap: wrap; }
  .menu-botao {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 42px; height: 38px; padding: 0 9px; margin-left: auto;
    background: var(--suave); border: 1px solid var(--borda); border-radius: 9px; cursor: pointer;
  }
  .menu-botao span { display: block; height: 2px; background: var(--cor-texto); border-radius: 2px; }
  .cabecalho-direita {
    order: 3; width: 100%; display: none; padding-top: 10px;
    border-top: 1px solid var(--borda); margin-top: 10px;
  }
  .cabecalho.aberto .cabecalho-direita { display: flex; }
  .navegacao { display: none; padding: 0 14px 8px; flex-direction: column; }
  .cabecalho.aberto .navegacao { display: flex; }
  .nav-item { border-bottom: 0; border-left: 3px solid transparent; border-radius: 0 8px 8px 0; }
  .nav-item.ativo { border-left-color: var(--cor-primaria); background: var(--suave); }
  .conteudo { padding: 18px 14px 50px; }
  .publico-conteudo { padding: 22px 14px 50px; }
  .painel { padding: 16px; }
  .tabela-rolagem { margin: 0 -16px -16px; padding: 0 16px 16px; }
  .seletor-evento select { max-width: 100%; }
  .seletor-evento { width: 100%; }
  .credencial-qr img { width: 200px; height: 200px; }
}

/* ------------------------------------------- leitor: resultado da leitura
   Complementa .leitor-status para o retorno da validação ficar legível a um
   braço de distância no celular da recepção (operacao/leitor.php). */
.leitor-resultado { padding: 20px 18px; text-align: center; }
.leitor-resultado .titulo-resultado {
  display: block; font-size: 1.45rem; font-weight: 800;
  letter-spacing: -.01em; line-height: 1.2;
}
.leitor-resultado .nome { font-size: 1.55rem; margin-top: 6px; }
.leitor-resultado .detalhe { font-size: .95rem; }
.leitor-contador { font-variant-numeric: tabular-nums; }

/* Prévia da importação em lote: destaca as linhas que não podem entrar. */
.tabela tr.linha-invalida { background: var(--erro-fundo); }
.tabela tr.linha-invalida:hover { background: var(--erro-fundo); }

/* Faixa branca para o logo no topo da credencial: funciona com qualquer marca,
   clara ou escura, sem depender de uma versão específica para fundo escuro. */
.credencial-marca {
  background: #fff; padding: 14px 20px; text-align: center;
  border-bottom: 1px solid var(--borda);
}
.credencial-marca > img { max-height: 46px; max-width: 210px; display: inline-block; }

/* -------------------------------------------------- assinatura conjunta
   Logo do organizador e logo do evento lado a lado, separados por um traço
   fino. Quando existe só uma marca, o traço não aparece. */
.marcas {
  display: inline-flex; align-items: center; gap: 14px;
  flex-wrap: nowrap; min-width: 0;
}
.marcas img { max-width: 190px; width: auto; display: block; object-fit: contain; }
.marcas-divisor {
  width: 1px; align-self: stretch; min-height: 26px;
  background: var(--borda-forte); flex: none;
}
/* Em telas estreitas as marcas empilham para não encavalar. */
.marcas-empilha { flex-wrap: wrap; justify-content: center; gap: 12px 18px; }
.marca .marcas img { max-height: 40px; }
.credencial-marca .marcas { justify-content: center; width: 100%; }
@media (max-width: 560px) {
  .marcas { gap: 10px; }
  .marcas img { max-width: 130px; }
}
@media print { .marcas-divisor { background: #bbb; } }