/* ============================================================================
   guided_tour_mobile.css — Sistema guiado do tutorial no MOBILE (bottom sheet)

   Par do assets/js/guided_tour_mobile.js. Só existe ≤768px (mesmo breakpoint do
   mobile.css e do .desktop-only-btn); o motor de desktop (guided_tour.css) não
   é carregado junto — o loader do guided_tour_config.php escolhe UM.

   Regras do design system: dark+light por tokens (var(--token)), sem glow/neon,
   sem gradiente em botão, superfície secundária = var(--surface-2) + borda.
   Alturas em dvh (nunca vh): no iOS o vh resolve pelo viewport GRANDE e o painel
   fixo estoura a área realmente visível — mesmo motivo do fix da v1.96.1.
   ============================================================================ */

@media (max-width: 768px) {

/* ---- Máscara: 4 retângulos em volta do alvo (sem clip-path) --------------
   clip-path + position:fixed deriva no iOS quando a barra de endereço colapsa.
   Com 4 peças o "buraco" é um vão real: o alvo continua clicável e nada é
   recortado. As peças só existem em passos de AÇÃO (tocar/salvar). */
.gtm-mask { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.gtm-mask.gtm-on { opacity: 1; }
.gtm-mask-piece {
    position: fixed;
    background: rgba(0, 0, 0, .68);
    pointer-events: none;
}
.gtm-mask.gtm-on .gtm-mask-piece { pointer-events: auto; }

/* ---- Anel do alvo -------------------------------------------------------- */
.gtm-ring {
    position: fixed;
    border: 2px solid var(--brand, #00C215);
    border-radius: 10px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease, top .18s ease, left .18s ease, width .18s ease, height .18s ease;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .35);
}
.gtm-ring.gtm-on { opacity: 1; }
.gtm-ring::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 2px solid var(--brand, #00C215);
    opacity: 0;
    animation: gtm-ripple 1.8s ease-out infinite;
}
@keyframes gtm-ripple {
    0% { transform: scale(1); opacity: .5; }
    70% { transform: scale(1.1); opacity: 0; }
    100% { opacity: 0; }
}

/* ---- Bottom sheet -------------------------------------------------------- */
.gtm-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 54dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--panel, #151515);
    border-top: 1px solid var(--line, #2a2a2a);
    border-radius: var(--radius-modal, 16px) var(--radius-modal, 16px) 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .55);
    color: var(--text, #eaf2ed);
    padding: 0 14px calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translateY(102%);
    transition: transform .28s cubic-bezier(.16, 1, .3, 1), max-height .2s ease;
    will-change: transform;
}
.gtm-sheet.gtm-on { transform: translateY(0); }
.gtm-sheet.gtm-sheet--card { max-height: 82dvh; }

/* handle: toque recolhe/reexpande */
.gtm-handle {
    display: block;
    width: 100%;
    background: none;
    border: 0;
    padding: 9px 0 5px;
    cursor: pointer;
}
.gtm-handle span {
    display: block;
    width: 38px;
    height: 4px;
    margin: 0 auto;
    border-radius: 2px;
    background: var(--muted, #6b7280);
}

/* ---- Cabeçalho: progresso ------------------------------------------------ */
.gtm-head { padding: 2px 0 10px; }
.gtm-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--line, #2a2a2a);
    overflow: hidden;
}
.gtm-bar span {
    display: block;
    height: 100%;
    background: var(--brand, #00C215);
    border-radius: 2px;
    transition: width .3s ease;
}
.gtm-crumbs {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 6px;
    font-size: 11px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--muted-sub, #a6b3ad);
}
.gtm-crumbs b { color: var(--brand-text, #00C215); font-weight: 700; }

/* ---- Corpo --------------------------------------------------------------- */
.gtm-body { padding-bottom: 4px; }
.gtm-title {
    font-family: var(--font-heading, inherit);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 6px;
    color: var(--text, #eaf2ed);
}
.gtm-help {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--muted-sub, #a6b3ad);
}
.gtm-help p { margin: 0 0 7px; }
.gtm-help b, .gtm-help strong { color: var(--text, #eaf2ed); }
.gtm-dim { opacity: .8; font-size: 12.5px; }

.gtm-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--brand-text, #00C215);
    margin-bottom: 6px;
}
.gtm-badge--ok { color: var(--success, #22c55e); }

.gtm-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-text, #00C215);
}
.gtm-cta i { animation: gtm-nudge 1.1s ease-in-out infinite; }
@keyframes gtm-nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* Botão "usar exemplo" */
.gtm-example {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding: 9px 12px;
    background: var(--surface-2, #1e1e1e);
    border: 1px dashed var(--line, #2a2a2a);
    border-radius: var(--radius-btn, 8px);
    color: var(--muted-sub, #a6b3ad);
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}
.gtm-example i { color: var(--brand-text, #00C215); }
.gtm-example b { color: var(--text, #eaf2ed); }

.gtm-err {
    margin-top: 10px;
    padding: 9px 11px;
    border-radius: var(--radius-btn, 8px);
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .4);
    color: var(--error, #fca5a5);
    font-size: 12.5px;
    line-height: 1.4;
}

/* Lista dos 4 passos (boas-vindas) */
.gtm-steps { list-style: none; margin: 12px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.gtm-steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text, #eaf2ed);
    background: var(--bg, #101010);
    border: 1px solid var(--line, #2a2a2a);
    border-radius: var(--radius-btn, 8px);
    padding: 9px 11px;
}
.gtm-steps li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    flex: 0 0 auto;
    border-radius: 999px;
    border: 1px solid var(--line, #2a2a2a);
    color: var(--brand-text, #00C215);
    font-size: 11.5px;
    font-weight: 700;
}

/* Opções grandes (escolher caminho / próximos passos) */
.gtm-options { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.gtm-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 11px 13px;
    background: var(--surface-2, #1e1e1e);
    border: 1px solid var(--line, #2a2a2a);
    border-radius: var(--radius-btn, 10px);
    color: var(--text, #eaf2ed);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.gtm-option--primary { border-color: var(--brand, #00C215); }
.gtm-option i { width: 20px; text-align: center; color: var(--brand-text, #00C215); flex: 0 0 auto; }
.gtm-option span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.gtm-option small { font-size: 11.5px; color: var(--muted-sub, #a6b3ad); }

/* ---- Ações --------------------------------------------------------------- */
.gtm-actions {
    display: flex;
    gap: 9px;
    margin-top: 14px;
}
.gtm-btn {
    flex: 1 1 auto;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    background: var(--surface-2, #1e1e1e);
    border: 1px solid var(--line, #2a2a2a);
    border-radius: var(--radius-btn, 10px);
    color: var(--text, #eaf2ed);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.gtm-btn--primary {
    background: var(--brand, #00C215);
    border-color: var(--brand, #00C215);
    color: var(--button-primary-text, #ffffff);
    font-weight: 700;
    flex: 2 1 auto;
}
.gtm-btn:active { filter: brightness(1.05); }

.gtm-foot {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 9px;
}
.gtm-link {
    background: none;
    border: 0;
    padding: 8px 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted-sub, #a6b3ad);
    cursor: pointer;
}
/* "Sair da conta" — saída garantida mesmo no tutorial obrigatório */
.gtm-link--muted { opacity: .85; }
.gtm-link--muted i { font-size: 11px; margin-right: 2px; }
.gtm-link--danger { color: var(--error, #fca5a5); }
.gtm-foot-msg { font-size: 12.5px; color: var(--text, #eaf2ed); font-weight: 600; margin-right: 2px; }

/* ---- Recolhido (teclado aberto ou toque no handle) -----------------------
   Vira uma barra fina: some tudo menos o título numa linha e as ações — assim
   o campo em edição continua visível acima do teclado. */
.gtm-sheet.gtm-collapsed { max-height: 122px; overflow: hidden; }
.gtm-sheet.gtm-collapsed .gtm-head,
.gtm-sheet.gtm-collapsed .gtm-help,
.gtm-sheet.gtm-collapsed .gtm-example,
.gtm-sheet.gtm-collapsed .gtm-steps,
.gtm-sheet.gtm-collapsed .gtm-options,
.gtm-sheet.gtm-collapsed .gtm-cta,
.gtm-sheet.gtm-collapsed .gtm-badge,
.gtm-sheet.gtm-collapsed .gtm-foot { display: none; }
.gtm-sheet.gtm-collapsed .gtm-title {
    font-size: 14px;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gtm-sheet.gtm-collapsed .gtm-err { margin-top: 6px; }
.gtm-sheet.gtm-collapsed .gtm-actions { margin-top: 8px; }
.gtm-sheet.gtm-collapsed .gtm-handle { padding: 7px 0 3px; }

/* Enquanto o teclado está aberto o painel nunca cresce */
body.gtm-kb .gtm-sheet { max-height: 122px; }

/* ---- Espaço para o painel dentro de MODAIS de tela cheia -----------------
   Modal em tela cheia tem rolagem própria e rodapé fixo (Voltar/Avançar/Salvar
   do Cadastro Rápido, por exemplo). Só dar padding-bottom no <body> não resolve:
   quem precisa encolher é o modal, senão o rodapé dele fica atrás do painel do
   guia e não existe rolagem que o alcance. --gtm-sheet-h é a altura do painel
   (setada pelo JS; 0 quando o guia está escondido). */
body.gtm-space .qr-modal-overlay {
    padding-bottom: calc(20px + var(--gtm-sheet-h, 0px) + env(safe-area-inset-bottom, 0px));
}
body.gtm-space .modal-overlay,
body.gtm-space .am-modal,
body.gtm-space .modal-al {
    padding-bottom: calc(var(--gtm-sheet-h, 0px) + env(safe-area-inset-bottom, 0px));
    align-items: flex-start;
}
body.gtm-space .modal-overlay .modal-content {
    max-height: calc(85dvh - var(--gtm-sheet-h, 0px));
}
/* .modal-content-custom (listagens: receitas, vistorias, locações, franqueados)
   é flex-column com .modal-body-custom rolando e .modal-footer-custom FORA da
   rolagem — mesmo caso do Cadastro Rápido: encolher a caixa é o que mantém o
   rodapé alcançável. */
body.gtm-space .modal-content-custom {
    max-height: calc(90dvh - var(--gtm-sheet-h, 0px));
}
body.gtm-space .am-modal > .am-modal-box {
    max-height: calc(100% - var(--gtm-sheet-h, 0px));
}

/* ---- Cedendo a vez -------------------------------------------------------
   A PÁGINA abriu algo dela (bottom sheet de ações, drawer de filtros, modal
   de upgrade). O guia sai inteiro de cena e volta sozinho quando fechar — em
   vez de ficar por cima bloqueando justamente o que o usuário quis abrir. */
.gtm-sheet.gtm-yield { transform: translateY(102%) !important; pointer-events: none; }
.gtm-ring.gtm-yield,
.gtm-mask.gtm-yield { opacity: 0 !important; pointer-events: none !important; }
.gtm-mask.gtm-yield .gtm-mask-piece { pointer-events: none !important; }

/* ---- Acessibilidade ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .gtm-ring::after, .gtm-cta i { animation: none !important; }
    .gtm-sheet, .gtm-ring, .gtm-mask { transition: opacity .15s ease; }
}

} /* /@media (max-width: 768px) */