/* Peças que só existem na demo do site (site/demo/). O resto da tela é o
   style.css do sistema, sem mudança. Mesmas variáveis e botões do app. */

/* ─── "Voltar ao site", no topo escuro ──────────────────────────── */
.demo-sair {
  margin-left: auto;
  color: #cbd5e1; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 8px; padding: 6px 10px;
}
.demo-sair:hover { color: #fff; background: rgba(255, 255, 255, .08); }

/* ─── Faixa "você está na demo" (no lugar dos avisos do sistema) ── */
.demo-faixa {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  background: #fffbeb; border: 1px dashed #f59e0b; color: #78350f;
  border-radius: var(--raio); padding: 10px 14px;
  margin: 14px 16px 0; max-width: 828px;
  font-size: 14px;
}
.demo-faixa p { flex: 1 1 260px; }
.demo-faixa b { color: #78350f; }
.demo-faixa-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-faixa-acoes .botao { white-space: nowrap; }
@media (min-width: 860px) { .demo-faixa { margin-left: auto; margin-right: auto; } }

/* Primeira tela, enquanto o SQLite da demo carrega */
.demo-carregando { text-align: center; color: var(--texto-2); padding: 64px 16px; font-size: 14px; }
.demo-carregando::before {
  content: ''; display: block; width: 28px; height: 28px; margin: 0 auto 14px;
  border: 3px solid var(--borda); border-top-color: var(--primaria); border-radius: 50%;
  animation: demo-gira .8s linear infinite;
}
@keyframes demo-gira { to { transform: rotate(360deg); } }
.demo-falha {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 20px; color: var(--texto-2); font-size: 14px;
}
.demo-falha b { display: block; color: var(--texto); margin-bottom: 4px; }

/* ─── Elemento apontado pelo tutorial ───────────────────────────── */
.demo-alvo {
  outline: 3px solid var(--primaria); outline-offset: 4px; border-radius: 10px;
  animation: demo-pulso 1.6s ease-in-out 2;
}
@keyframes demo-pulso {
  50% { outline-offset: 8px; outline-color: rgba(249, 115, 22, .45); }
}

/* ─── Cartão do tutorial ────────────────────────────────────────── */
/* Acima das abas (10/11) e abaixo do modal (20) e do documento (19) */
.demo-tour {
  position: fixed; z-index: 15;
  left: 8px; right: 8px; bottom: calc(64px + env(safe-area-inset-bottom));
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borda); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .22);
  overflow: hidden;
}
.demo-tour-topo { display: flex; align-items: center; }
.demo-tour-titulo {
  flex: 1; text-align: left; background: none; border: none; cursor: pointer; font-family: inherit;
  padding: 10px 14px 8px; font-size: 12.5px; font-weight: 600; color: var(--texto-2);
}
.demo-tour-titulo::after { content: ' ▾'; color: var(--texto-3); }
.demo-tour.minimizado .demo-tour-titulo::after { content: ' ▴'; }
.demo-tour-x {
  background: none; border: none; cursor: pointer; color: var(--texto-3);
  font-size: 15px; line-height: 1; padding: 10px 14px 8px;
}
.demo-tour-x:hover, .demo-tour-titulo:hover { color: var(--texto); }
.demo-tour-barra { height: 3px; background: var(--borda); margin: 0 14px; border-radius: 2px; }
.demo-tour-barra span { display: block; height: 100%; background: var(--primaria); border-radius: 2px; transition: width .25s; }
.demo-tour-corpo { padding: 10px 14px 14px; }
.demo-tour h3 { font-size: 16px; letter-spacing: -.01em; margin-bottom: 4px; }
.demo-tour p { font-size: 14px; color: var(--texto-2); line-height: 1.45; }
.demo-tour-acoes { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; }
.demo-tour-voltar, .demo-tour-proximo {
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  border-radius: 10px; padding: 9px 14px; text-decoration: none; white-space: nowrap;
}
.demo-tour-voltar { background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); }
.demo-tour-proximo { background: linear-gradient(145deg, var(--ambar), var(--primaria)); color: #fff; border: none; }
.demo-tour-proximo:hover { filter: brightness(1.06); }
.demo-tour.minimizado .demo-tour-barra, .demo-tour.minimizado .demo-tour-corpo { display: none; }

/* Folga no fim da página: o que fica lá embaixo (botões da OS) consegue
   rolar para cima do cartão em vez de ficar escondido atrás dele */
body.demo-com-tutorial { padding-bottom: calc(300px + env(safe-area-inset-bottom)); }

@media (min-width: 700px) {
  .demo-tour { left: auto; right: 20px; bottom: 20px; width: 360px; }
  body.demo-com-tutorial { padding-bottom: 220px; }
}

/* ─── Orçamento / vistoria por cima da tela ─────────────────────── */
.demo-documento { position: fixed; inset: 0; z-index: 19; background: #fff; }
.demo-documento iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ─── Prévia da mensagem de WhatsApp ────────────────────────────── */
.demo-zap-explica { font-size: 14px; color: var(--texto-2); margin-bottom: 10px; }
.demo-zap-balao {
  background: #d9fdd3; color: #111b21; border-radius: 12px 12px 12px 3px;
  padding: 10px 12px; margin: 4px 0 12px; font-size: 14px; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
}
.demo-zap-rodape { text-align: center; font-size: 13px; color: var(--texto-2); margin-top: 14px; }
.demo-zap-rodape a { color: #15803d; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .demo-alvo { animation: none; }
  .demo-carregando::before { animation-duration: 2.4s; }
}