/* RotaQR — monitor do visitante (exibição comandada pela portaria) --------- */
:root {
  --verde-950: #0b2e22;
  --verde-900: #0f3d2e;
  --verde-700: #17694e;
  --ambar: #f0b24a;
  --texto: #eaf3ee;
  --texto-suave: #a8c0b3;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body.quiosque {
  margin: 0;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--verde-950);
  color: var(--texto);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.oculto { display: none !important; }

/* ------------------------------------------------------- estado aguardando */
.aguardando {
  height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 20px; text-align: center; padding: 30px;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(28, 125, 92, .35), transparent 65%),
    radial-gradient(700px 420px at 110% 110%, rgba(240, 178, 74, .12), transparent 60%),
    linear-gradient(165deg, var(--verde-950), var(--verde-900) 60%, #144833);
  animation: respira 9s ease-in-out infinite;
}
@keyframes respira { 50% { filter: brightness(1.07); } }

.marca-grande .marca-logo {
  display: grid; place-items: center; width: 86px; height: 86px; margin: 0 auto 10px;
  border-radius: 22px; background: var(--verde-700); color: #d9f2e4;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 16px 40px rgba(0, 0, 0, .35);
}
.marca-grande h1 { margin: 0; font-size: 3rem; letter-spacing: .01em; }
.marca-grande h1 span { color: var(--ambar); }
.marca-grande .cond { margin: 4px 0 0; color: var(--texto-suave); font-size: 1.15rem; }

.mensagem { font-size: 1.5rem; font-weight: 700; max-width: 640px; line-height: 1.4; }

.pulsa-linha { display: flex; gap: 10px; }
.pulsa-linha span {
  width: 12px; height: 12px; border-radius: 50%; background: var(--ambar);
  animation: pulsa 1.4s ease-in-out infinite;
}
.pulsa-linha span:nth-child(2) { animation-delay: .22s; }
.pulsa-linha span:nth-child(3) { animation-delay: .44s; }
@keyframes pulsa { 50% { opacity: .25; transform: translateY(-6px); } }

.relogio { color: var(--texto-suave); font-size: 1.1rem; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------- estado exibindo */
.exibindo { position: fixed; inset: 0; }

#mapa { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #0d2a1f; }

#painel {
  position: absolute; z-index: 4;
  top: 18px; left: 18px; bottom: 18px;
  width: 410px; max-width: 92vw;
  display: flex; flex-direction: column;
  background: linear-gradient(172deg, rgba(15, 61, 46, .95), rgba(11, 46, 34, .97));
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 20px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .5);
  overflow: hidden;
  animation: painelEntra .45s ease;
}
@keyframes painelEntra { from { opacity: 0; transform: translateX(-14px); } }

.painel-topo { padding: 20px 22px 12px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.marca { display: flex; align-items: center; gap: 12px; }
.marca-logo {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 12px; background: var(--verde-700); color: #d9f2e4;
}
.marca-texto strong { font-size: 1.15rem; }
.marca-texto span { color: var(--ambar); }
.marca-texto small { display: block; color: var(--texto-suave); font-size: .78rem; }

.painel-corpo { flex: 1; min-height: 0; padding: 16px 22px; display: flex; flex-direction: column; gap: 12px; }

.rotulo { margin: 0; color: var(--texto-suave); font-size: .88rem; letter-spacing: .06em; text-transform: uppercase; }
.codigo-lote {
  margin: 0; font-family: ui-monospace, Menlo, monospace;
  font-size: 2.7rem; color: #fff; line-height: 1.1; letter-spacing: .02em;
}
.rota-obs { margin: 0; color: var(--texto-suave); font-size: .95rem; }

.linha-percurso {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0; font-size: .9rem;
}
.linha-percurso .ponto-a, .linha-percurso .ponto-b { width: 11px; height: 11px; border-radius: 50%; }
.linha-percurso .ponto-a { background: #fff; }
.linha-percurso .ponto-b { background: var(--ambar); }
.linha-percurso .seta { color: var(--ambar); font-weight: 800; }

.qr-cartao {
  background: #fff; border-radius: 18px; padding: 16px;
  width: fit-content; margin: 2px auto 0;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .4);
}
#qr canvas, #qr img { width: 236px; height: 236px; display: block; }

.instrucao { text-align: center; color: var(--texto-suave); font-size: .94rem; margin: 0; }
.instrucao strong { color: #fff; }

.painel-pe { padding: 10px 22px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; justify-content: flex-end; }

/* carregando */
.carregando {
  position: absolute; z-index: 6; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(11, 46, 34, .94); color: var(--texto);
  padding: 10px 20px; border-radius: 999px;
  font-weight: 600; border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
}
.giro {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .25);
  border-top-color: var(--ambar);
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

@media (max-width: 720px) {
  #painel { width: min(340px, 94vw); }
  .codigo-lote { font-size: 2rem; }
  #qr canvas, #qr img { width: 190px; height: 190px; }
  .mensagem { font-size: 1.15rem; }
  .marca-grande h1 { font-size: 2.2rem; }
}