/* ══════════════════════════════════════════
   TOUR GUIADO DE PÁGINA (doca de ajuda + passo a passo)
   ------------------------------------------
   Componente único de /contatos, /funil e de quem vier depois. A marcação é
   criada por assets/js/lemon-tour.js; a página só entrega os passos.

   Por que o escurecimento é UM elemento só: `.ltour-hole` é um retângulo
   transparente cujo box-shadow de 9999px pinta todo o resto de escuro. Assim o
   alvo continua no z-index dele (o painel de filtros do funil é fixed, a
   gaveta do lead é um aside) e aparece pelo furo exatamente onde está. Mover o
   elemento mudaria o layout no meio da explicação sobre ele.

   Como sombra não recebe clique, quem bloqueia a página é `.ltour-block`,
   transparente, por baixo do furo.

   z-index na casa dos 100 mil porque o widget de ajuda global (o balão do
   canto, em _includes/help_assistant.php) vive em 99998/99999: abaixo disso
   ele ficaria aceso, boiando por cima do escuro do tour.
   ══════════════════════════════════════════ */

:root {
    --ltour-accent: #afbf28;
    --ltour-accent-dark: #8a9620;
    --ltour-ink: #1e293b;
    --ltour-muted: #64748b;
    --ltour-line: #e2e8f0;
}

/* ── Doca da borda direita ───────────────────────────── */
/* z-index 1045: abaixo do backdrop do modal (1050) de propósito. A doca não
   pode ficar boiando por cima de um modal aberto. */
.ltour-dock {
    position: fixed; right: 0; top: 42%; z-index: 1045;
    display: none; align-items: stretch;
    width: 46px; min-height: 46px;
    background: #fff; border: 1px solid var(--ltour-line); border-right: 0;
    border-radius: 12px 0 0 12px;
    box-shadow: 0 12px 34px rgba(15,23,42,.14);
    overflow: hidden; transition: width .22s ease, box-shadow .18s ease;
    font-family: inherit;
}
.ltour-dock.is-on { display: flex; }
.ltour-dock:hover { width: 150px; box-shadow: 0 16px 42px rgba(15,23,42,.18); }
.ltour-dock.is-open,
.ltour-dock.is-open:hover { width: min(306px, calc(100vw - 18px)); }

.ltour-dock-trigger {
    position: relative; width: 46px; min-width: 46px; border: 0; background: #fff;
    color: var(--ltour-accent-dark); display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 19px;
}
.ltour-dock-trigger:hover { background: #fbfdf2; }
.ltour-dock-label {
    display: flex; align-items: center; white-space: nowrap; padding: 0 16px 0 0;
    font-size: 13px; font-weight: 800; color: var(--ltour-ink); cursor: pointer;
}
.ltour-dock.is-open .ltour-dock-label { display: none; }
.ltour-dock-panel { display: none; min-width: 0; flex: 1; border-left: 1px solid #f1f5f9; padding: 17px 16px; }
.ltour-dock.is-open .ltour-dock-panel { display: block; }
.ltour-dock-title { font-size: 14.5px; font-weight: 700; color: var(--ltour-ink); margin: 0 0 6px; letter-spacing: -.1px; }
.ltour-dock-copy { font-size: 12.5px; line-height: 1.55; color: var(--ltour-muted); margin: 0 0 15px; }
.ltour-dock-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Selo de "ainda não viu": some para sempre depois do primeiro tour. */
.ltour-dock.is-new .ltour-dock-trigger::after {
    content: ''; position: absolute; top: 9px; right: 9px; width: 7px; height: 7px;
    border-radius: 50%; background: var(--ltour-accent);
    animation: ltourPulse 2.6s ease-out infinite;
}
@keyframes ltourPulse {
    0%   { box-shadow: 0 0 0 0 rgba(175,191,40,.55); }
    70%  { box-shadow: 0 0 0 9px rgba(175,191,40,0); }
    100% { box-shadow: 0 0 0 0 rgba(175,191,40,0); }
}

/* ── Camadas do tour ─────────────────────────────────── */
.ltour-block {
    position: fixed; inset: 0; z-index: 100000; background: transparent;
    display: none; cursor: default;
}
.ltour-hole {
    position: fixed; top: 50%; left: 50%; width: 0; height: 0; z-index: 100001;
    pointer-events: none; display: none; border-radius: 14px;
    box-shadow: 0 0 0 3px rgba(175,191,40,.6), 0 0 0 9999px rgba(15,23,42,.66);
    transition: top .4s cubic-bezier(.4,0,.2,1), left .4s cubic-bezier(.4,0,.2,1),
                width .4s cubic-bezier(.4,0,.2,1), height .4s cubic-bezier(.4,0,.2,1),
                border-radius .4s ease;
}
/* Passo sem alvo (abertura): só o escuro, sem anel. */
.ltour-hole.no-target { box-shadow: 0 0 0 9999px rgba(15,23,42,.72); }
#ltour.is-on .ltour-block,
#ltour.is-on .ltour-hole,
#ltour.is-on .ltour-pop { display: block; }

/* ── Cartão do passo ─────────────────────────────────── */
/* Sem cabeçalho e sem contador: o X flutua na quina e o progresso é a pilha do
   rodapé. A barra colada no topo do cartão vazava pela quina arredondada; no
   rodapé o raio dela mesma resolve as pontas. */
.ltour-pop {
    position: fixed; z-index: 100002; display: none;
    width: min(360px, calc(100vw - 28px));
    background: #fff; border-radius: 16px;
    box-shadow: 0 18px 46px rgba(2,12,27,.26);
    opacity: 0; transition: opacity .2s ease;
    font-family: inherit;
}
.ltour-pop.is-in { opacity: 1; }
.ltour-pop.is-center {
    left: 50% !important; top: 50% !important;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100vw - 32px));
}
.ltour-arrow {
    position: absolute; width: 14px; height: 14px; background: #fff;
    transform: rotate(45deg); border-radius: 2px;
}
.ltour-pop[data-place="bottom"] .ltour-arrow { top: -6px; margin-left: -7px; }
.ltour-pop[data-place="top"]    .ltour-arrow { bottom: -6px; margin-left: -7px; }
.ltour-pop[data-place="right"]  .ltour-arrow { left: -6px; margin-top: -7px; }
.ltour-pop[data-place="left"]   .ltour-arrow { right: -6px; margin-top: -7px; }
.ltour-pop.is-center .ltour-arrow { display: none; }

.ltour-close {
    position: absolute; top: 11px; right: 11px;
    width: 26px; height: 26px; border: 0; border-radius: 8px; background: transparent;
    color: #b4bdc9; cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 15px; transition: background .15s, color .15s;
}
.ltour-close:hover { background: #f1f5f9; color: var(--ltour-ink); }
.ltour-body { padding: 18px 18px 16px; }
.ltour-title { font-size: 16px; font-weight: 700; color: var(--ltour-ink); margin: 0 0 7px; padding-right: 26px; line-height: 1.3; letter-spacing: -.1px; }
.ltour-text { font-size: 13px; line-height: 1.6; color: var(--ltour-muted); margin: 0; }
.ltour-text:empty { display: none; }

/* Lista item a item: usada onde "o que cada botão faz" só cabe assim. Fora
   desses passos ela fica vazia e some. */
.ltour-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.ltour-list:empty { display: none; }
.ltour-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; line-height: 1.45; color: var(--ltour-muted); }
.ltour-list i { color: var(--ltour-accent-dark); font-size: 15px; flex-shrink: 0; margin-top: 1px; width: 16px; text-align: center; }
.ltour-list b { color: var(--ltour-ink); font-weight: 600; }
.ltour-note { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: #9aa5b4; }
.ltour-note:empty { display: none; }

.ltour-foot { display: flex; align-items: center; gap: 14px; padding: 0 18px 16px; }
.ltour-track { flex: 1; min-width: 40px; height: 3px; border-radius: 999px; background: #eceff3; overflow: hidden; }
.ltour-track i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--ltour-accent); transition: width .35s ease; }
.ltour-acts { display: flex; gap: 7px; flex-shrink: 0; }

.ltour-btn {
    display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px;
    border: 1px solid var(--ltour-line); border-radius: 9px; background: #fff;
    font-size: 12.5px; font-weight: 700; color: var(--ltour-muted);
    cursor: pointer; transition: all .15s; white-space: nowrap; font-family: inherit;
}
.ltour-btn:hover { border-color: #cbd5e1; color: var(--ltour-ink); background: #f8fafc; }
.ltour-btn:disabled { opacity: .45; cursor: not-allowed; }
.ltour-btn-primary { border-color: var(--ltour-accent); background: var(--ltour-accent); color: #fff; }
.ltour-btn-primary:hover { border-color: var(--ltour-accent-dark); background: var(--ltour-accent-dark); color: #fff; }

@media (max-width: 720px) {
    .ltour-dock { top: auto; bottom: 118px; }
    .ltour-dock:hover { width: 46px; }
    .ltour-pop, .ltour-pop.is-center {
        left: 50% !important; top: auto !important; bottom: 14px;
        transform: translateX(-50%); width: calc(100vw - 20px);
    }
    .ltour-pop .ltour-arrow { display: none; }
}