:root {
  --fundo: #f3f5f9;
  --cartao: #ffffff;
  --texto: #1b2433;
  --suave: #5d6b82;
  --borda: #dfe4ec;
  --primaria: #1d3f73;
  --primaria-hover: #163260;
  --sucesso: #1f9d55;
  --sucesso-hover: #178246;
  --perigo: #c73a3a;
  --alerta: #e8a317;
  --raio: 10px;
  --sombra: 0 1px 2px rgba(20, 30, 50, .06), 0 2px 8px rgba(20, 30, 50, .05);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
a { color: var(--primaria); }
h1 { font-size: 1.5rem; margin: .2em 0 .6em; }
h2 { font-size: 1.1rem; margin: 0 0 .7em; }
.sub { color: var(--suave); font-size: .88em; }
.sub-grande { color: var(--suave); font-size: 1.05rem; }
.rot { display: block; color: var(--suave); font-size: .8em; text-transform: uppercase; letter-spacing: .03em; }
.carregando { padding: 40px; text-align: center; color: var(--suave); }
.vazio { padding: 24px; text-align: center; color: var(--suave); background: var(--cartao); border: 1px dashed var(--borda); border-radius: var(--raio); }
.vazio-mini { color: var(--suave); font-size: .9em; margin: .3em 0; }
[hidden] { display: none !important; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 14px; border: 1px solid var(--borda); border-radius: 8px; background: #fff; color: var(--texto);
  font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; min-height: 40px;
}
.btn:hover { background: #f5f7fb; }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primario { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.btn-primario:hover { background: var(--primaria-hover); }
.btn-sucesso { background: var(--sucesso); border-color: var(--sucesso); color: #fff; }
.btn-sucesso:hover { background: var(--sucesso-hover); }
.btn-perigo { background: var(--perigo); border-color: var(--perigo); color: #fff; }
.btn-link { background: none; border: none; color: var(--primaria); text-decoration: underline; }
.btn-link.perigo { color: var(--perigo); }
.btn-mini { padding: 4px 10px; min-height: 30px; font-size: .88em; }
.btn-grande { padding: 13px 20px; font-size: 1.05rem; font-weight: 600; }
.btn-gigante { white-space: normal; text-align: center; padding: 18px 14px; font-size: 1.12rem; font-weight: 700; letter-spacing: .02em; border-radius: 12px; }
.btn-bloco { display: flex; width: 100%; margin: 8px 0; }
.btn-copiar {
  display: flex; width: 100%; justify-content: center; padding: 18px; margin: 4px 0 14px;
  font-size: 1.3rem; font-weight: 800; letter-spacing: .03em; color: #fff; background: var(--sucesso);
  border: none; border-radius: 12px; cursor: pointer; box-shadow: 0 3px 10px rgba(31, 157, 85, .3);
}
.btn-copiar:hover { background: var(--sucesso-hover); }
.btn-copiar.copiado { background: var(--primaria); }
.acoes, .acoes-dir { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
.acoes-dir { justify-content: flex-end; margin-bottom: 0; }

/* ---------- Formulários ---------- */
.campo { display: block; margin-bottom: 12px; }
.campo > span { display: block; font-weight: 600; font-size: .9em; margin-bottom: 4px; }
input, select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid #c9d1de; border-radius: 8px; font: inherit; background: #fff; color: var(--texto);
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(29, 63, 115, .25); border-color: var(--primaria); }
input[type=checkbox] { width: auto; }
textarea { resize: vertical; }
.campo-check { display: flex; gap: 8px; align-items: center; margin: 6px 0 12px; font-weight: 600; }
.grade-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 14px; }

/* ---------- Cartões, listas ---------- */
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; margin-bottom: 14px; box-shadow: var(--sombra); }
.lista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.item-lista { display: block; background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; color: inherit; text-decoration: none; }
.item-lista:hover { border-color: var(--primaria); }
.item-destaque { border-left: 4px solid var(--alerta); }
.item-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.item-texto { margin: 4px 0; color: #3a4659; }
.item-rodape { font-size: .85em; color: var(--suave); }
.titulo-secao { margin-top: 22px; }
.linha-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; }
.linha-titulo { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 10px; }
.grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; }
.info-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.info-lista > div { margin-bottom: 10px; }

.selo { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.selo-cinza { background: #eceff4; color: #4a5568; }
.selo-amarelo { background: #fff4d6; color: #8a5b00; }
.selo-azul { background: #e2ebf8; color: #1d3f73; }
.selo-verde { background: #dcf3e5; color: #146c3b; }
.selo-laranja { background: #ffe7d1; color: #a24b00; }
.selo-vermelho { background: #fde0e0; color: #a51f1f; }

.faixa { padding: 12px 14px; border-radius: var(--raio); background: #eef2f8; margin-bottom: 14px; border: 1px solid var(--borda); }
.faixa-ok { background: #e3f6ea; border-color: #bfe6cd; color: #145c33; }
.faixa-alerta { background: #fff4d6; border-color: #f0dca3; }

.abas { display: flex; gap: 4px; border-bottom: 2px solid var(--borda); margin-bottom: 14px; overflow-x: auto; }
.abas a { padding: 8px 14px; text-decoration: none; color: var(--suave); border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; font-weight: 500; }
.abas a.ativa { color: var(--primaria); border-color: var(--primaria); }

.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px; }
.filtros > input { flex: 2 1 240px; }
.filtros > select { flex: 1 1 160px; width: auto; }
.filtros label { display: flex; align-items: center; gap: 6px; font-size: .9em; }
.filtros label input { width: auto; }

.tabela-rolagem { overflow-x: auto; background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela th { background: #f7f9fc; font-size: .82em; text-transform: uppercase; color: var(--suave); letter-spacing: .03em; }
.tabela-clicavel tbody tr { cursor: pointer; }
.tabela-clicavel tbody tr:hover { background: #f5f8fd; }
.inativo { opacity: .55; }

/* ---------- Topo / menu admin ---------- */
.topo {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  background: var(--primaria); color: #fff; padding: 10px 16px; height: 56px;
}
.topo a { color: #fff; text-decoration: none; }
.marca { font-weight: 800; font-size: 1.1rem; }
.marca small { font-weight: 500; opacity: .75; }
.topo-usuario { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.topo .btn { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); }
.btn-menu { display: none; background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; }
.shell-admin { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: 56px 1fr; min-height: 100vh; }
.shell-admin .topo { grid-column: 1 / -1; }
.menu { background: #fff; border-right: 1px solid var(--borda); padding: 12px 8px; position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; }
.menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--texto); text-decoration: none; font-weight: 500; }
.menu a:hover { background: #f1f4f9; }
.menu a.ativo { background: #e2ebf8; color: var(--primaria); font-weight: 700; }
.menu .ic { width: 22px; text-align: center; }
.menu .menu-sec { margin-top: 14px; border-top: 1px solid var(--borda); border-radius: 0; padding-top: 14px; color: var(--suave); }
.contador { margin-left: auto; background: #dfe5ee; color: var(--texto); border-radius: 99px; padding: 0 8px; font-size: .8em; font-weight: 700; }
.contador-alerta { background: var(--perigo); color: #fff; }
.conteudo { padding: 20px 24px 60px; max-width: 1200px; width: 100%; }
.conteudo-simples { padding: 16px; }
.pagina-estreita { max-width: 640px; margin: 0 auto; }

/* ---------- Indicadores ---------- */
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.indicador { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; text-decoration: none; color: inherit; box-shadow: var(--sombra); }
.indicador b { display: block; font-size: 1.9rem; line-height: 1.1; color: var(--primaria); }
.indicador span { color: var(--suave); font-size: .9em; }
.ind-alerta { border-left: 4px solid var(--perigo); }
.ind-alerta b { color: var(--perigo); }

/* ---------- Login ---------- */
.tela-login { min-height: 90vh; display: flex; align-items: center; justify-content: center; }
.tela-login .cartao { width: 100%; max-width: 400px; padding: 28px; }
.login-marca { color: var(--primaria); margin-bottom: 0; }

/* ---------- Funcionário ---------- */
.topo-campo { position: sticky; }
.onde summary { cursor: pointer; font-weight: 600; padding: 2px 0; }
.onde[open] summary { margin-bottom: 12px; }
.conversa { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.bolha { align-self: flex-end; max-width: 88%; background: #dcecff; border-radius: 14px 14px 4px 14px; padding: 10px 12px; }
.bolha-foto { padding: 5px; background: #eaf2fd; }
.bolha-foto img { display: block; max-width: 100%; max-height: 300px; border-radius: 10px; cursor: zoom-in; }
.bolha-rodape { font-size: .75em; color: var(--suave); text-align: right; margin-top: 3px; display: flex; gap: 10px; justify-content: flex-end; }
.link-apagar { background: none; border: none; color: var(--perigo); cursor: pointer; font-size: 1em; padding: 0; text-decoration: underline; }
.compositor { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px; margin-bottom: 14px; box-shadow: var(--sombra); }
.compositor textarea { font-size: 16px; }
.compositor-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.compositor-botoes .btn { flex: 1 1 auto; min-height: 46px; }

/* ---------- Relato e O.S. ---------- */
.mensagem-relato { background: #f4f7fb; border-left: 3px solid #9fb6d8; padding: 8px 12px; border-radius: 6px; margin-bottom: 8px; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-bottom: 10px; }
.miniatura { position: relative; border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; background: #f0f2f6; }
.miniatura img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; cursor: zoom-in; }
.miniatura .marcar { display: flex; gap: 6px; align-items: center; padding: 6px 8px; font-size: .82em; background: #fff; cursor: pointer; }
.miniatura.desmarcada img { opacity: .35; filter: grayscale(1); }

.os-editor.com-relato { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 16px; align-items: start; }
.relato { position: sticky; top: 72px; max-height: calc(100vh - 90px); overflow-y: auto; border-left: 4px solid var(--alerta); }
.os-form { min-width: 0; }
.pend-linha { display: grid; grid-template-columns: 1fr 120px 170px auto; gap: 8px; margin-bottom: 8px; }
.pend-concluidas { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--borda); color: #146c3b; }
.barra-salvar {
  position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end;
  background: rgba(243, 245, 249, .96); padding: 12px 0; border-top: 1px solid var(--borda);
}

.grade-os { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.documento-os { padding: 24px 28px; }
.texto-os { margin: 0; white-space: pre-wrap; word-wrap: break-word; font: 14px/1.55 "Segoe UI", Arial, sans-serif; }
.acoes-os .btn { flex: 1 1 150px; }
.pend-item { padding: 8px 0; border-bottom: 1px solid var(--borda); }
.pend-item.concluida { opacity: .7; }
.pendencia.concluida { opacity: .8; }
.pend-desc { font-size: 1.05rem; margin: 8px 0; }
.pend-controles { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 10px; }
.pend-controles label { font-size: .85em; color: var(--suave); }
.pend-controles select { width: auto; display: block; }
.pend-controles .btn { margin-left: auto; }

.dl-os { display: grid; grid-template-columns: 150px 1fr; gap: 4px 12px; margin: 10px 0; }
.dl-os dt { color: var(--suave); font-size: .88em; }
.dl-os dd { margin: 0; }
.os-historico { border-left: 4px solid var(--primaria); }

.barra-linha { display: grid; grid-template-columns: minmax(120px, 40%) 1fr 36px; gap: 10px; align-items: center; margin-bottom: 6px; }
.barra-rot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9em; }
.barra { background: #eef1f6; border-radius: 4px; height: 14px; overflow: hidden; }
.barra span { display: block; height: 100%; background: var(--primaria); border-radius: 4px; }

/* ---------- Modal e avisos ---------- */
.modal-fundo { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: #fff; border-radius: 12px; padding: 20px; width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.modal-largo { max-width: 1000px; }
.modal-texto { font-size: 1.05rem; }
.lista-botoes .btn { justify-content: flex-start; }
.texto-copia { font-family: inherit; font-size: 13px; }
.lightbox img { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto; border-radius: 6px; }
.lb-barra { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 12px; }
.remover-foto { position: absolute; top: 4px; right: 4px; border: none; background: rgba(0,0,0,.6); color: #fff; border-radius: 50%; width: 26px; height: 26px; cursor: pointer; }
#avisos { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; width: min(92vw, 420px); }
.aviso { padding: 12px 16px; border-radius: 10px; color: #fff; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.2); transition: opacity .3s, transform .3s; }
.aviso-ok { background: var(--sucesso); }
.aviso-erro { background: var(--perigo); }
.aviso-info { background: var(--primaria); }
.aviso.saindo { opacity: 0; transform: translateY(-8px); }
.erro-tela { border-left: 4px solid var(--perigo); }

/* ---------- Celular ---------- */
@media (max-width: 900px) {
  .shell-admin { grid-template-columns: 1fr; }
  .btn-menu { display: block; }
  .menu { display: none; position: fixed; top: 56px; left: 0; right: 0; height: auto; max-height: calc(100vh - 56px); z-index: 30; box-shadow: 0 8px 24px rgba(0,0,0,.15); }
  .menu.aberto { display: block; }
  .conteudo { padding: 14px 12px 60px; }
  .os-editor.com-relato, .grade-os { grid-template-columns: 1fr; }
  .relato { position: static; max-height: 45vh; }
  .pend-linha { grid-template-columns: 1fr 1fr; }
  .pend-linha input { grid-column: 1 / -1; }
  .dl-os { grid-template-columns: 1fr; }
  .dl-os dt { margin-top: 6px; }
  .topo-usuario > a { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .documento-os { padding: 16px; }
}
@media print {
  .topo, .menu, .acoes, .btn-copiar, .linha-topo, aside { display: none !important; }
  .shell-admin { display: block; }
  .cartao { box-shadow: none; border: none; }
}

/* ---------- Offline / fila de envio / conversa ---------- */
.faixa-offline { background: #fdecec; border-color: #f3c4c4; color: #7a1f1f; }
.faixa-espera { background: #fff4d6; border-color: #f0dca3; color: #6b4a00; }
.faixa-espera .btn, .faixa-offline .btn { margin-top: 6px; }
.item-espera { border-left: 4px solid var(--alerta); }
.item-resposta { border-left: 4px solid var(--primaria); }
.aviso-resposta { display: inline-block; margin: 4px 0; padding: 2px 10px; border-radius: 99px; background: #e2ebf8; color: var(--primaria); font-weight: 700; font-size: .85em; }
.bolha-admin { align-self: flex-start; background: #fff; border: 1px solid #cdd9ea; border-radius: 14px 14px 14px 4px; }
.bolha-admin .bolha-rodape { justify-content: flex-start; }
.bolha-pendente { opacity: .75; border: 1px dashed var(--alerta); }
.pendente { color: #8a5b00; font-weight: 600; }
.ind-envio { margin-left: 4px; font-weight: 700; background: rgba(255,255,255,.15); border-radius: 99px; padding: 0 8px; }
.ind-envio:empty { display: none; }
.mensagem-admin { background: #eef7f1; border-left-color: var(--sucesso); }
.responder { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.responder textarea { flex: 1; }
.selo-novo { background: var(--perigo); color: #fff; }
.cartao-internet { border-left: 4px solid var(--sucesso); }
.cartao-internet code { font-size: 1.05em; background: #f1f4f9; padding: 3px 8px; border-radius: 6px; word-break: break-all; }
.foto-conversa { display:block; max-width: 180px; max-height: 140px; border-radius: 6px; margin-top: 4px; cursor: zoom-in; }
.btn-instalar { border-color: var(--primaria); color: var(--primaria); font-weight: 600; }

/* ---------- Vídeos ---------- */
.midia-video { position: relative; display: block; cursor: pointer; }
.midia-video video { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #000; }
.midia-video .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2rem; text-shadow: 0 2px 8px rgba(0,0,0,.6); pointer-events: none; }
.foto-conversa .midia-video video, .foto-conversa img { max-width: 180px; max-height: 140px; border-radius: 6px; }
.foto-conversa img { display: block; cursor: zoom-in; }
.lightbox video { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto; border-radius: 6px; background: #000; }
.bolha-foto video { display: block; max-width: 100%; max-height: 320px; border-radius: 10px; background: #000; }

/* ---------- QR Code / chamados ---------- */
.btn-equip { border-color: var(--primaria); color: var(--primaria); }
.item-qr { border-left: 4px solid var(--sucesso); }
.faixa-qr { background: #e3f6ea; border-color: #bfe6cd; color: #145c33; }
.publico { padding-top: 6px; }
.pub-marca { text-align: center; font-weight: 800; font-size: 1.35rem; color: var(--primaria); margin: 4px 0 12px; letter-spacing: .02em; }
.pub-equip h1 { margin: 2px 0 4px; }
.pub-previa { margin-top: 10px; }
.pub-previa .miniatura img { cursor: default; }
.pub-progresso { margin-top: 10px; font-weight: 600; }
.pub-progresso .barra { margin-top: 6px; }
.pub-sucesso { text-align: center; padding: 28px 20px; }
.pub-check { width: 72px; height: 72px; margin: 0 auto 10px; border-radius: 50%; background: var(--sucesso); color: #fff; font-size: 2.4rem; display: flex; align-items: center; justify-content: center; }
.publico textarea, .publico input { font-size: 16px; }

/* Etiqueta (tela e impressão) */
.etiqueta {
  width: 6.2cm; margin: 0 auto 14px; padding: .35cm .3cm; background: #fff; color: #000; text-align: center;
  border: 2px solid #1d3f73; border-radius: 10px; font-family: Arial, Helvetica, sans-serif; break-inside: avoid; page-break-inside: avoid;
}
.et-marca { font-weight: 800; font-size: 15pt; color: #1d3f73; }
.et-chamada { font-weight: 800; font-size: 10pt; color: #c73a3a; margin-top: 2px; }
.et-qr svg { display: block; width: 5cm; height: 5cm; margin: 4px auto; }
.et-instr { font-size: 7.5pt; color: #333; }
.et-equip { font-weight: 700; font-size: 10.5pt; margin-top: 5px; line-height: 1.2; }
.et-local { font-size: 8pt; color: #333; line-height: 1.25; }
.et-cod { font-family: monospace; font-size: 7pt; color: #777; margin-top: 3px; }
.folha-etiquetas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; }
.folha-etiquetas .etiqueta { margin: 0; }

@media print {
  @page { size: A4; margin: 1cm; }
  body { background: #fff; }
  body * { visibility: hidden; }
  .area-impressao, .area-impressao * { visibility: visible; }
  .area-impressao { position: absolute; left: 0; top: 0; width: 100%; }
  .nao-imprimir { display: none !important; }
  .folha-etiquetas { gap: .4cm; }
  #avisos { display: none; }
}
.btn-bloco { white-space: normal; text-align: center; }

/* ---------- Peças trocadas ---------- */
.pc-form { background: #f7f9fc; border: 1px solid var(--borda); border-radius: 8px; padding: 12px; margin: 10px 0 14px; }
.tabela-pecas td { vertical-align: top; }
@media (max-width: 700px) {
  .tabela-pecas thead { display: none; }
  .tabela-pecas tr { display: block; border-bottom: 1px solid var(--borda); padding: 8px 4px; }
  .tabela-pecas td { display: block; border: none; padding: 2px 8px; }
  .tabela-pecas td[data-rot]::before { content: attr(data-rot) ": "; color: var(--suave); font-size: .85em; }
}

/* ---------- Leitor de QR Code (técnico) ---------- */
.btn-ler-qr { background: #0f5132; border-color: #0f5132; color: #fff; font-weight: 700; }
.btn-ler-qr:hover { background: #0b3d26; color: #fff; }
.leitor { position: relative; background: #111; border-radius: var(--raio); overflow: hidden; aspect-ratio: 3 / 4; max-height: 62vh; width: 100%; margin-bottom: 12px; }
.leitor video { width: 100%; height: 100%; object-fit: cover; display: block; }
.leitor-mira { position: absolute; inset: 18% 14%; border: 3px solid rgba(255,255,255,.85); border-radius: 14px; box-shadow: 0 0 0 999px rgba(0,0,0,.28); pointer-events: none; }
.leitor-msg { position: absolute; left: 10px; right: 10px; bottom: 10px; background: rgba(0,0,0,.72); color: #fff; padding: 10px 12px; border-radius: 8px; text-align: center; font-weight: 600; }
.leitor-msg.leitor-erro { background: rgba(165,31,31,.92); }
.leitor-sem-camera { aspect-ratio: auto; min-height: 150px; }
.leitor-sem-camera .leitor-mira, .leitor-sem-camera video { display: none; }
.leitor-sem-camera .leitor-msg { position: static; margin: 12px; }

/* ---------- Painel da máquina ---------- */
.mq-nome { margin-bottom: .1em; }
#mq-cab { margin-bottom: 12px; }
.sit-cartao { border-radius: var(--raio); padding: 14px 16px; margin-bottom: 12px; border: 2px solid var(--borda); background: #fff; }
.sit-rot { font-size: .78em; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }
.sit-titulo { font-size: 1.25rem; font-weight: 700; margin: 2px 0 4px; }
.sit-texto { margin: 6px 0; }
.sit-verde { background: #e3f6ea; border-color: #9fd9b5; }
.sit-amarelo { background: #fff6dc; border-color: #eed48a; }
.sit-laranja { background: #ffeddc; border-color: #f2b27a; }
.sit-vermelho { background: #fde6e6; border-color: #eea3a3; }
.sit-azul { background: #e8eef8; border-color: #b7c8e6; }
.sit-vazia { border-style: dashed; }
.sit-chamado { margin-top: 6px; }
.sit-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.sit-opcao { display: block; cursor: pointer; }
.sit-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.sit-opcao span { display: flex; align-items: center; min-height: 56px; padding: 8px 12px; border: 2px solid var(--borda); border-radius: var(--raio); font-weight: 600; background: #fff; }
.sit-opcao input:checked + span { border-color: var(--primaria); box-shadow: 0 0 0 3px rgba(29,63,115,.18); }
.sit-op-verde input:checked + span { background: #e3f6ea; }
.sit-op-amarelo input:checked + span { background: #fff6dc; }
.sit-op-laranja input:checked + span { background: #ffeddc; }
.sit-op-vermelho input:checked + span { background: #fde6e6; }
.sit-opcao input:focus-visible + span { outline: 2px solid var(--primaria); outline-offset: 2px; }
.mq-form { margin-bottom: 14px; }
.falta-lista { list-style: none; margin: 0 0 10px; padding: 0; }
.falta-lista li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.falta-lista li:last-child { border-bottom: 0; }
.falta-lista .btn { flex-shrink: 0; }
.mq-add { display: flex; gap: 8px; }
.mq-add input { flex: 1; min-width: 0; }
.mq-acoes { display: grid; gap: 8px; margin: 14px 0; }
.hist-resumo { margin: -6px 0 8px; }
.hist-lista { list-style: none; margin: 0; padding: 0; }
.hist-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.hist-item:last-child { border-bottom: 0; }
.hist-ic { font-size: 1.2rem; line-height: 1.3; width: 1.6em; text-align: center; flex-shrink: 0; }
.hist-item > div { min-width: 0; overflow-wrap: anywhere; }
#painel-maquina { margin-bottom: 16px; }
@media (max-width: 420px) { .sit-opcoes { grid-template-columns: 1fr; } }

/* ---------- Atendimento na máquina (tempo real) ---------- */
.contador-verde { background: var(--sucesso); color: #fff; }
.sv-pulso { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--sucesso); vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(31,157,85,.6); animation: sv-pulso 1.6s infinite; flex-shrink: 0; }
@keyframes sv-pulso { 0% { box-shadow: 0 0 0 0 rgba(31,157,85,.55); } 70% { box-shadow: 0 0 0 9px rgba(31,157,85,0); } 100% { box-shadow: 0 0 0 0 rgba(31,157,85,0); } }
@media (prefers-reduced-motion: reduce) { .sv-pulso { animation: none; } }
.sv-dica { margin: -2px 0 12px; text-align: center; }
.sv-ativo { border: 2px solid #9fd9b5; background: #f4fbf6; }
.sv-topo { display: flex; align-items: center; gap: 8px; color: #145c33; font-size: 1.05rem; }
.sv-log { list-style: none; margin: 10px 0; padding: 0; }
.sv-reg { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--borda); }
.sv-quando { color: var(--suave); font-size: .85em; min-width: 3.2em; padding-top: 2px; font-variant-numeric: tabular-nums; }
.sv-corpo { min-width: 0; overflow-wrap: anywhere; flex: 1; }
.sv-autor { font-size: .8em; font-weight: 700; color: var(--suave); }
.sv-evento { color: var(--suave); font-weight: 600; }
.sv-foto { display: inline-block; margin-top: 4px; }
.sv-foto img, .sv-foto video { max-width: 180px; max-height: 140px; border-radius: 8px; display: block; object-fit: cover; }
.sv-foto .midia-video { position: relative; display: inline-block; }
.sv-nota textarea { width: 100%; }
.sv-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.sv-botoes .btn { justify-content: center; }
.sv-fim { border-top: 1px solid var(--borda); padding-top: 12px; margin-top: 8px; }
.sv-cancelar { display: block; margin: 6px auto 0; color: var(--suave); font-size: .85em; }
.faixa-andamento { display: block; background: #e3f6ea; border-color: #9fd9b5; color: #145c33; text-decoration: none; }
.faixa-andamento .sub { color: #2f6b47; }
.ao-vivo { display: inline-flex; align-items: center; gap: 6px; }
.sv-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.sv-card { display: flex; flex-direction: column; border-left: 4px solid var(--sucesso); margin: 0; }
.sv-card-topo { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.sv-maquina { font-size: 1.08rem; }
.sv-selo { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sv-card-info { margin: 6px 0; font-size: .92em; }
.sv-log-caixa { max-height: 340px; overflow-y: auto; border: 1px solid var(--borda); border-radius: 8px; padding: 0 10px; background: #fbfcfe; }
.sv-log-caixa .sv-log { margin: 0; }
.sv-log-caixa .sv-reg:first-child { border-top: 0; }
.sv-card-rodape { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.sv-novo { animation: sv-destaque 4s ease-out; }
@keyframes sv-destaque { 0%, 40% { background: #fff4c2; } 100% { background: transparent; } }
.item-novo { border-left: 4px solid var(--perigo); }
@media (max-width: 420px) { .sv-grade { grid-template-columns: 1fr; } .sv-foto img, .sv-foto video { max-width: 100%; } }
.sv-pausado { border-color: #eed48a; background: #fffaeb; }
.sv-topo-pausa { color: #8a5b00; }
.sv-pausa-info { background: #fff4d6; border: 1px solid #f0dca3; color: #6b4a00; border-radius: 8px; padding: 6px 10px; margin: 6px 0; font-size: .92em; }
.sv-ev-pausa { color: #8a5b00; }
.btn-pausar { border-color: #d9a520; color: #7a5200; background: #fffaeb; }
.sv-card-pausado { border-left-color: var(--alerta); }
.faixa-pausado { background: #fff4d6; border-color: #f0dca3; color: #6b4a00; }

/* ---------- Seleção em lote (dar baixa / excluir) ---------- */
.barra-lote { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 14px; position: sticky; top: 0; z-index: 5; }
.lote-todas { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.lote-todas input, .sel-caixa input, .pend-sel input { width: 20px; height: 20px; margin: 0; cursor: pointer; }
.item-sel { display: flex; gap: 8px; align-items: stretch; }
.item-sel > .item-lista { flex: 1; min-width: 0; }
.sel-caixa { display: flex; align-items: center; padding: 0 6px; cursor: pointer; }
.item-sel.selecionada > .item-lista, .pendencia.selecionada { outline: 2px solid var(--perigo); outline-offset: -2px; background: #fff7f7; }
.pendencia.selecionada { outline-color: var(--sucesso); background: #f4fbf6; }
.pend-sel { display: flex; align-items: flex-start; padding: 2px 8px 0 0; }
.btn-perigo-sutil { color: var(--perigo); border-color: #eea3a3; }
.item-pend { display: flex; gap: 10px; align-items: center; }
.item-pend-link { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.item-pend .btn { flex-shrink: 0; }
@media (max-width: 480px) { .item-pend { flex-direction: column; align-items: stretch; } }
.pend-cab { display: flex; align-items: flex-start; }

/* ---------- QR Codes em branco ---------- */
.lotes-tabela td, .lotes-tabela th { white-space: nowrap; }
.etq-status-livre { color: #146c3b; font-weight: 600; }
.etq-status-usada { color: #1d3f73; }
.etq-status-cancelada { color: #a51f1f; text-decoration: line-through; }
.gerar-etq { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.gerar-etq .campo { margin: 0; }
.escolha-vinculo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.escolha-vinculo button { min-height: 56px; }
.escolha-vinculo button.ativa { border-color: var(--primaria); background: #e8eef8; box-shadow: 0 0 0 3px rgba(29,63,115,.15); font-weight: 700; }
.etq-hero { text-align: center; }
.etq-hero .etq-ic { font-size: 2.4rem; }
@media (max-width: 420px) { .escolha-vinculo { grid-template-columns: 1fr; } }
.item-escolha { width: 100%; text-align: left; font: inherit; cursor: pointer; margin-bottom: 8px; }
.item-escolha.selecionada { outline: 3px solid var(--sucesso); outline-offset: -3px; background: #f4fbf6; }

/* Folha A4 de QR Codes em branco: 20 (4 × 5) ou 12 (3 × 4) por folha, tamanho exato em cm */
.folha-a4 { display: grid; gap: 0; justify-content: center; align-content: start; background: #fff; margin: 0 auto 16px; }
.folha-20 { grid-template-columns: repeat(4, 4.75cm); grid-auto-rows: 5.45cm; }
.folha-12 { grid-template-columns: repeat(3, 6.3cm); grid-auto-rows: 6.8cm; }
.folha-a4 .etiqueta { width: auto; height: auto; margin: 0; border-radius: 0; border: 1px dashed #9aa6b8; display: flex; flex-direction: column;
  align-items: center; justify-content: center; overflow: hidden; }
.folha-20 .etiqueta { padding: .15cm .12cm; }
.folha-20 .et-marca { font-size: 10pt; line-height: 1.1; }
.folha-20 .et-chamada { font-size: 6.6pt; margin-top: 1px; }
.folha-20 .et-qr svg { width: 3.45cm; height: 3.45cm; margin: 2px auto; }
.folha-20 .et-instr { font-size: 5.6pt; line-height: 1.15; }
.folha-20 .et-cod { font-size: 5.5pt; margin-top: 1px; }
.folha-12 .etiqueta { padding: .25cm; }
.folha-12 .et-qr svg { width: 4.6cm; height: 4.6cm; }
@media print {
  .folha-a4 { break-after: page; margin: 0 auto; }
  .folha-a4:last-child { break-after: auto; }
}
@media screen and (max-width: 900px) { .folha-a4 { transform-origin: top left; zoom: .6; } }