/* Tour de novidades do ERP (18/10/2026) — cursor animado, holofote e cartões por cima da tela de verdade. */
.nv-tour { --nv-azul: #0f172a; --nv-azul2: #1e293b; --nv-laranja: #f59e0b; --nv-laranja2: #d97706; --nv-texto: #0f172a; --nv-mudo: #64748b; --nv-borda: #e2e8f0;
  position: fixed; inset: 0; z-index: 2147482000; pointer-events: none; font-family: 'DM Sans', system-ui, sans-serif; color: var(--nv-texto); }
.nv-tour * { box-sizing: border-box; }

/* Bloqueia cliques na tela durante o tour (o tour mexe na tela; a pessoa só assiste). */
.nv-bloqueio { position: fixed; inset: 0; pointer-events: auto; background: transparent; }

/* Holofote: um retângulo transparente com uma sombra enorme que escurece todo o resto. */
.nv-luz { position: fixed; top: 50%; left: 50%; width: 0; height: 0; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 200vmax rgba(8, 15, 30, .62); transition: top .55s cubic-bezier(.65, 0, .35, 1), left .55s cubic-bezier(.65, 0, .35, 1), width .55s cubic-bezier(.65, 0, .35, 1), height .55s cubic-bezier(.65, 0, .35, 1), opacity .3s; }
.nv-luz::after { content: ''; position: absolute; inset: -4px; border-radius: 17px; border: 2px solid var(--nv-laranja); box-shadow: 0 0 0 4px rgba(245, 158, 11, .22), 0 0 28px rgba(245, 158, 11, .45);
  animation: nv-pulso 1.8s ease-in-out infinite; }
.nv-luz.sem-alvo::after { display: none; }
@keyframes nv-pulso { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(1.012); } }

/* Cursor animado */
.nv-cursor { position: fixed; top: 0; left: 0; width: 30px; height: 30px; pointer-events: none; z-index: 3; opacity: 0;
  transform: translate(50vw, 80vh); transition: transform .9s cubic-bezier(.65, 0, .35, 1), opacity .3s; filter: drop-shadow(0 4px 8px rgba(2, 6, 23, .45)); will-change: transform; }
.nv-cursor.visivel { opacity: 1; }
.nv-cursor svg { width: 30px; height: 30px; display: block; transform-origin: 6px 4px; transition: transform .12s ease; }
.nv-cursor.clicando svg { transform: scale(.8); }
.nv-onda { position: fixed; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 3px solid var(--nv-laranja); pointer-events: none; opacity: 0; z-index: 2; }
.nv-onda.ativa { animation: nv-onda .6s ease-out forwards; }
@keyframes nv-onda { 0% { opacity: .95; transform: scale(.4); } 100% { opacity: 0; transform: scale(3.6); } }

/* Balão «Link copiado!» (só ilustração: o tour não mexe na área de transferência). */
.nv-balao { position: fixed; z-index: 4; pointer-events: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  background: #065f46; color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 10px 24px rgba(2, 6, 23, .3); opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .25s, transform .25s; }
.nv-balao.ativo { opacity: 1; transform: none; }
.nv-balao svg { width: 15px; height: 15px; }

/* Cartão de cada passo */
.nv-cartao { position: fixed; top: 0; left: 0; width: 360px; max-width: calc(100vw - 24px); pointer-events: auto; z-index: 5;
  background: #fff; border-radius: 18px; border: 1px solid rgba(15, 23, 42, .08); box-shadow: 0 24px 60px -12px rgba(2, 6, 23, .45), 0 2px 6px rgba(2, 6, 23, .08);
  transition: top .5s cubic-bezier(.65, 0, .35, 1), left .5s cubic-bezier(.65, 0, .35, 1), opacity .25s; overflow: hidden; }
.nv-cartao[hidden] { display: none; }
.nv-cartao-barra { height: 4px; background: #eef2f7; }
.nv-cartao-barra span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--nv-laranja), var(--nv-laranja2)); transition: width .5s ease; }
.nv-cartao-corpo { padding: 16px 18px 6px; }
.nv-cartao-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.nv-etapa { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--nv-laranja2); background: rgba(245, 158, 11, .12); border-radius: 999px; padding: 3px 9px; }
.nv-fechar { margin-left: auto; width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent; color: var(--nv-mudo); cursor: pointer; display: grid; place-items: center; }
.nv-fechar:hover { background: #f1f5f9; color: var(--nv-texto); }
.nv-fechar svg { width: 16px; height: 16px; }
.nv-tit { display: flex; align-items: flex-start; gap: 10px; }
.nv-tit-ic { flex: 0 0 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--nv-azul), var(--nv-azul2)); }
.nv-tit-ic svg { width: 18px; height: 18px; }
.nv-tit h3 { margin: 2px 0 0; font-family: 'Sora', 'DM Sans', sans-serif; font-size: 17px; line-height: 1.3; font-weight: 700; color: var(--nv-texto); text-wrap: balance; }
.nv-txt { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: #334155; }
.nv-txt strong { color: var(--nv-texto); }
.nv-dica { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 2px; padding: 9px 11px; border-radius: 10px; background: #f8fafc; border: 1px solid var(--nv-borda); font-size: 12.5px; line-height: 1.45; color: #475569; }
.nv-dica svg { flex: 0 0 15px; width: 15px; height: 15px; color: var(--nv-laranja2); margin-top: 1px; }
.nv-cartao-pe { display: flex; align-items: center; gap: 8px; padding: 12px 18px 16px; }
.nv-pontos { display: flex; gap: 5px; margin-right: auto; }
.nv-pontos i { width: 7px; height: 7px; border-radius: 50%; background: #dbe2ea; transition: background .3s, width .3s; }
.nv-pontos i.on { width: 18px; border-radius: 999px; background: var(--nv-laranja); }
.nv-btn { font: inherit; font-size: 13.5px; font-weight: 700; border-radius: 10px; padding: 9px 15px; cursor: pointer; border: 1px solid transparent; transition: background .15s, transform .1s, box-shadow .15s; }
.nv-btn:active { transform: translateY(1px); }
.nv-btn:focus-visible { outline: 2px solid var(--nv-laranja); outline-offset: 2px; }
.nv-btn-sec { background: #fff; border-color: var(--nv-borda); color: var(--nv-texto); }
.nv-btn-sec:hover { background: #f8fafc; }
.nv-btn-pri { background: linear-gradient(135deg, var(--nv-laranja), var(--nv-laranja2)); color: #fff; box-shadow: 0 6px 16px -4px rgba(217, 119, 6, .55); }
.nv-btn-pri:hover { box-shadow: 0 8px 20px -4px rgba(217, 119, 6, .7); }
.nv-btn-link { background: none; border: 0; color: var(--nv-mudo); font-weight: 600; padding: 9px 6px; }
.nv-btn-link:hover { color: var(--nv-texto); text-decoration: underline; }
.nv-cartao.entrando .nv-cartao-corpo { animation: nv-entra .35s ease both; }
@keyframes nv-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Telas de abertura e de fim */
.nv-tela { position: fixed; inset: 0; pointer-events: auto; display: grid; place-items: center; padding: 16px; z-index: 6;
  background: rgba(8, 15, 30, .66); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: nv-fundo .3s ease both; }
.nv-tela[hidden] { display: none; }
@keyframes nv-fundo { from { opacity: 0; } to { opacity: 1; } }
.nv-painel { width: min(600px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: 24px; box-shadow: 0 30px 80px -20px rgba(2, 6, 23, .6); animation: nv-sobe .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes nv-sobe { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }

/* Abertura: uma «janelinha do ERP» animada, com o cursor clicando em Links úteis. */
.nv-cena { position: relative; height: 176px; overflow: hidden; background: radial-gradient(120% 140% at 100% 0%, rgba(245, 158, 11, .35) 0%, rgba(245, 158, 11, 0) 45%), linear-gradient(135deg, #0b1222 0%, #0f172a 45%, #1e293b 100%); }
.nv-cena::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(180deg, #000 0%, transparent 100%); }
.nv-mini { position: absolute; left: 50%; top: 26px; width: 330px; height: 172px; margin-left: -165px; border-radius: 14px 14px 0 0; background: #f8fafc; box-shadow: 0 -6px 30px rgba(0, 0, 0, .35); overflow: hidden; animation: nv-mini-sobe .7s .15s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes nv-mini-sobe { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.nv-mini-topo { height: 26px; display: flex; align-items: center; gap: 5px; padding: 0 10px; background: #fff; border-bottom: 1px solid #e2e8f0; }
.nv-mini-topo i { width: 7px; height: 7px; border-radius: 50%; background: #e2e8f0; }
.nv-mini-pilula { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; height: 17px; padding: 0 8px; border-radius: 6px; font-size: 9px; font-weight: 800; color: #0f172a; background: rgba(15, 23, 42, .07); border: 1px solid rgba(15, 23, 42, .12); animation: nv-pilula 4.2s 1s infinite; }
@keyframes nv-pilula { 0%, 26% { background: rgba(15, 23, 42, .07); color: #0f172a; } 30%, 88% { background: #0f172a; color: #fff; } 92%, 100% { background: rgba(15, 23, 42, .07); color: #0f172a; } }
.nv-mini-lado { position: absolute; left: 0; top: 26px; bottom: 0; width: 64px; background: #0f172a; padding: 10px 8px; display: grid; gap: 7px; align-content: start; }
.nv-mini-lado i { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .16); }
.nv-mini-lado i:nth-child(2) { background: rgba(245, 158, 11, .7); width: 80%; }
.nv-mini-menu { position: absolute; right: 10px; top: 32px; width: 150px; padding: 7px; border-radius: 10px; background: #fff; box-shadow: 0 12px 26px rgba(2, 6, 23, .22); display: grid; grid-template-columns: 1fr 1fr; gap: 5px; opacity: 0; transform: translateY(-4px); animation: nv-menu 4.2s 1s infinite; }
.nv-mini-menu b { height: 26px; border-radius: 7px; background: #f1f5f9; border: 1px solid #e2e8f0; position: relative; }
.nv-mini-menu b::before { content: ''; position: absolute; left: 5px; top: 7px; width: 10px; height: 10px; border-radius: 3px; background: linear-gradient(135deg, #f59e0b, #d97706); }
@keyframes nv-menu { 0%, 30% { opacity: 0; transform: translateY(-4px); } 36%, 86% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-4px); } }
.nv-mini-cursor { position: absolute; width: 18px; height: 18px; left: 120px; top: 120px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); animation: nv-mini-cursor 4.2s 1s infinite; }
@keyframes nv-mini-cursor { 0% { left: 120px; top: 120px; } 24% { left: 286px; top: 9px; transform: scale(1); } 28% { transform: scale(.8); } 32% { transform: scale(1); } 52% { left: 220px; top: 44px; } 62% { left: 248px; top: 72px; } 88% { left: 248px; top: 72px; } 100% { left: 120px; top: 120px; } }
.nv-faisca { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 12px #fbbf24; opacity: 0; animation: nv-faisca 3.2s ease-in-out infinite; }
.nv-faisca:nth-of-type(1) { left: 12%; top: 30%; animation-delay: .2s; }
.nv-faisca:nth-of-type(2) { left: 86%; top: 22%; animation-delay: 1.1s; }
.nv-faisca:nth-of-type(3) { left: 20%; top: 72%; animation-delay: 2s; }
.nv-faisca:nth-of-type(4) { left: 78%; top: 66%; animation-delay: 2.6s; }
@keyframes nv-faisca { 0%, 100% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; transform: scale(1); } 70% { opacity: 0; transform: scale(.5); } }

.nv-painel-corpo { padding: 24px 28px 8px; }
.nv-sobre { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--nv-laranja2); }
.nv-painel h2 { margin: 6px 0 8px; font-family: 'Sora', 'DM Sans', sans-serif; font-size: 25px; line-height: 1.22; font-weight: 800; color: var(--nv-texto); text-wrap: balance; }
.nv-painel p.nv-lead { margin: 0; font-size: 15px; line-height: 1.55; color: #475569; }
.nv-lista { list-style: none; margin: 18px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.nv-lista li { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 12px; border: 1px solid var(--nv-borda); background: #fbfcfe; font-size: 13.5px; font-weight: 700; color: var(--nv-texto); opacity: 0; animation: nv-entra .45s ease forwards; animation-delay: calc(.35s + var(--i) * .08s); }
.nv-lista li span { display: block; font-size: 11.5px; font-weight: 500; color: var(--nv-mudo); margin-top: 1px; }
.nv-lista .nv-li-ic { flex: 0 0 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--nv-laranja2); background: rgba(245, 158, 11, .12); }
.nv-lista .nv-li-ic svg { width: 17px; height: 17px; }
.nv-painel-pe { display: flex; align-items: center; gap: 10px; padding: 16px 28px 24px; flex-wrap: wrap; }
.nv-painel-pe .nv-tempo { margin-right: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--nv-mudo); }
.nv-painel-pe .nv-tempo svg { width: 14px; height: 14px; }
.nv-painel .nv-btn { padding: 11px 18px; font-size: 14px; }

/* Fim */
.nv-fim { text-align: center; padding: 34px 28px 10px; }
.nv-check { width: 76px; height: 76px; margin: 0 auto 12px; }
.nv-check circle { fill: none; stroke: rgba(16, 185, 129, .18); stroke-width: 6; }
.nv-check .nv-check-anel { fill: none; stroke: #10b981; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 214; stroke-dashoffset: 214; transform: rotate(-90deg); transform-origin: 50% 50%; animation: nv-desenha .8s .2s ease forwards; }
.nv-check path { fill: none; stroke: #10b981; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: nv-desenha .45s .85s ease forwards; }
@keyframes nv-desenha { to { stroke-dashoffset: 0; } }
.nv-fim .nv-painel-pe { justify-content: center; }
.nv-onde { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 7px 12px; border-radius: 999px; background: #f1f5f9; font-size: 13px; font-weight: 700; color: var(--nv-texto); }
.nv-onde svg { width: 14px; height: 14px; color: var(--nv-laranja2); }

/* Enquanto o tour roda, os avisos flutuantes do ERP saem da frente (voltam no fim). */
body.nv-ativo #cdc-banner-vendas-site, body.nv-ativo #pix-aviso-wrap, body.nv-ativo #cdc-update-bar { visibility: hidden !important; }
.nv-painel-pe.nv-centro { justify-content: center; }

/* Conteúdo da janelinha da abertura: título, cartões e um gráfico que cresce */
.nv-mini-conteudo { position: absolute; left: 76px; right: 12px; top: 36px; bottom: 0; }
.nv-mini-conteudo .t { display: block; width: 46%; height: 8px; border-radius: 4px; background: #cbd5e1; }
.nv-mini-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 10px; }
.nv-mini-cards u { height: 30px; border-radius: 7px; background: #fff; border: 1px solid #e2e8f0; position: relative; }
.nv-mini-cards u::after { content: ''; position: absolute; left: 7px; top: 8px; width: 40%; height: 5px; border-radius: 3px; background: #f59e0b; opacity: .8; }
.nv-mini-cards u:nth-child(2)::after { background: #0f172a; opacity: .7; }
.nv-mini-cards u:nth-child(3)::after { background: #10b981; }
.nv-mini-graf { display: flex; align-items: flex-end; gap: 7px; height: 62px; margin-top: 10px; padding: 8px 8px 0; border-radius: 7px 7px 0 0; background: #fff; border: 1px solid #e2e8f0; border-bottom: 0; }
.nv-mini-graf em { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #1e293b, #0f172a); transform-origin: bottom; animation: nv-barra .9s .5s cubic-bezier(.2, .8, .2, 1) both; }
.nv-mini-graf em:nth-child(even) { background: linear-gradient(180deg, #fbbf24, #d97706); }
@keyframes nv-barra { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Fim: «Ficou claro?» */
.nv-resp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 4px; text-align: left; }
.nv-resp-btn { font: inherit; cursor: pointer; display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--nv-borda); background: #fff; color: var(--nv-texto); transition: border-color .15s, background .15s, transform .1s; }
.nv-resp-btn:hover { border-color: #cbd5e1; background: #f8fafc; }
.nv-resp-btn:active { transform: translateY(1px); }
.nv-resp-btn:focus-visible { outline: 2px solid var(--nv-laranja); outline-offset: 2px; }
.nv-resp-btn svg { grid-row: span 2; width: 22px; height: 22px; }
.nv-resp-btn b { font-size: 14px; }
.nv-resp-btn span { font-size: 12px; color: var(--nv-mudo); }
.nv-resp-btn.ok svg { color: #059669; }
.nv-resp-btn.duv svg { color: var(--nv-laranja2); }
.nv-resp-btn.on { border-color: var(--nv-laranja); background: rgba(245, 158, 11, .07); }
.nv-duvida-box { display: grid; gap: 8px; margin: 12px 0 2px; text-align: left; }
.nv-duvida-box[hidden] { display: none; }
.nv-duvida-box label { font-size: 13px; font-weight: 700; }
.nv-duvida-box label span { font-weight: 500; color: var(--nv-mudo); }
.nv-duvida-box textarea { font: inherit; font-size: 14px; width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid #cbd5e1; resize: vertical; }
.nv-duvida-box textarea:focus { outline: 2px solid rgba(245, 158, 11, .5); border-color: var(--nv-laranja); }
.nv-duvida-box .nv-btn { justify-self: end; }
.nv-fim .nv-onde { margin-top: 14px; }

/* Relatório «Quem viu as novidades» (admin) */
#modal-novidades-rel .nvr { width: min(860px, calc(100vw - 32px)); max-width: none; }
.nvr-intro { margin: 0 0 12px; font-size: 13px; color: #64748b; }
.nvr-tabela { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 12px; }
.nvr-tabela table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.nvr-tabela th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #64748b; background: #f8fafc; padding: 10px 12px; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.nvr-tabela td { padding: 11px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.nvr-tabela tr:last-child td { border-bottom: 0; }
.nvr-num { text-align: center; font-variant-numeric: tabular-nums; }
.nvr-chip { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.nvr-chip.ok { background: #ecfdf5; color: #047857; }
.nvr-chip.atencao { background: #fffbeb; color: #b45309; }
.nvr-chip.ruim { background: #fef2f2; color: #b91c1c; }
.nvr-chip.neutro { background: #f1f5f9; color: #475569; }
.nvr-duvida { margin-top: 6px; font-size: 12.5px; color: #334155; max-width: 260px; }
.nvr-traco { color: #94a3b8; }
.nvr-vazio { padding: 18px; text-align: center; color: #64748b; }

/* Celular: cartão encaixado embaixo, lista em uma coluna */
@media (max-width: 640px) {
  .nv-cartao { width: auto; }
  .nv-cartao-corpo { padding: 13px 16px 2px; }
  .nv-cartao-topo { margin-bottom: 8px; }
  .nv-tit-ic { flex-basis: 30px; height: 30px; }
  .nv-tit h3 { font-size: 15.5px; }
  .nv-txt { margin-top: 8px; font-size: 13.5px; line-height: 1.5; }
  .nv-dica { display: none; }
  .nv-cartao-pe { padding: 10px 16px 13px; }
  .nv-cartao-pe .nv-btn { padding: 8px 13px; }
  .nv-lista { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; }
  .nv-lista li { padding: 8px 9px; font-size: 12.5px; gap: 8px; }
  .nv-lista li span { display: none; }
  .nv-lista .nv-li-ic { flex-basis: 28px; height: 28px; }
  .nv-painel p.nv-lead { font-size: 14px; }
  .nv-painel-corpo { padding: 20px 18px 6px; }
  .nv-painel h2 { font-size: 21px; }
  .nv-painel-pe { padding: 14px 18px 20px; }
  .nv-painel-pe .nv-tempo { width: 100%; }
  .nv-painel-pe .nv-btn { flex: 1 1 auto; }
  .nv-cena { height: 150px; }
  .nv-mini { width: 290px; margin-left: -145px; }
}

@media (prefers-reduced-motion: reduce) {
  .nv-luz, .nv-cursor, .nv-cartao { transition-duration: .01s; }
  .nv-luz::after, .nv-mini-pilula, .nv-mini-menu, .nv-mini-cursor, .nv-faisca, .nv-mini-graf em { animation: none; }
  .nv-mini-menu { opacity: 1; transform: none; }
  .nv-lista li, .nv-painel, .nv-cartao.entrando .nv-cartao-corpo { animation: none; opacity: 1; }
}

/* Botão «Tutorial» do topo: só no computador (o dono pediu para desconsiderar o celular). */
@media (max-width: 768px) { #btn-tutorial { display: none !important; } }
body.modo-app #btn-tutorial { display: none !important; }