/* ===== Tour guiado (coach-marks) — destaque com brilho + popover explicativo ===== */

/* Chip circular opaco do botão ⓘ do guia (GuiaButton): sinaliza "isto é clicável" em
   qualquer header — sem o chip, um ícone outlined solto se perde visualmente no fundo.
   Modo claro: chip na cor primária translúcida. Modo Hero: chip branco translúcido
   sobre header teal/gradiente (a classe --hero troca só a cor, mesma silhueta). */
.guia-btn-chip {
    background: rgba(var(--mud-palette-primary-rgb), 0.12) !important;
}

.guia-btn-chip--hero {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
}

/* Beacon do combo de guia: pulso no botão ⓘ até o 1º uso (chama atenção sem ser intrusivo).
   Reutilizável em qualquer tela — some quando a flag localStorage "<modulo>_guia_visto" fica true. */
.guia-beacon {
    animation: guia-beacon-pulse 1.6s ease-out infinite;
}

@keyframes guia-beacon-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* Botão "Guia passo a passo" dentro de drawers/forms (GuiaLinkButton): espaçamento único. */
.guia-link-btn {
    margin-bottom: -8px;
}

/* Overlay transparente: apenas "trava" o tour e captura clique fora (avança).
   Não escurece a tela — o destaque é o brilho no próprio elemento. */
/* Modo interativo: o overlay não bloqueia o clique — o usuário preenche o campo em destaque
   e o tour avança apenas pelo botão "Próximo" do card. */
.tour-overlay--interativo {
    pointer-events: none;
}

.tour-overlay {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 4000;
    cursor: pointer;
}

/* Brilho colorido em volta do elemento-alvo (aplicado via JS). */
.tour-target-glow {
    position: relative;
    border-radius: 12px;
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--mud-palette-primary) 28%, transparent),
                0 0 26px 8px color-mix(in srgb, var(--mud-palette-primary) 50%, transparent);
    animation: tourPulse 1.6s ease-in-out infinite;
    transition: box-shadow .2s;
}

@keyframes tourPulse {
    0%, 100% {
        box-shadow: 0 0 0 5px color-mix(in srgb, var(--mud-palette-primary) 26%, transparent),
                    0 0 18px 6px color-mix(in srgb, var(--mud-palette-primary) 42%, transparent);
    }
    50% {
        box-shadow: 0 0 0 9px color-mix(in srgb, var(--mud-palette-primary) 16%, transparent),
                    0 0 34px 12px color-mix(in srgb, var(--mud-palette-primary) 60%, transparent);
    }
}

/* Card do popover (posicionado via style inline pelo componente). */
.tour-card {
    position: fixed;
    z-index: 4002;
    background: var(--mud-palette-surface);
    border-radius: 14px;
    box-shadow: 0 18px 46px rgba(0,0,0,0.28);
    padding: 16px 16px 10px;
    max-width: calc(100vw - 24px);
    animation: tourCardIn .18s ease-out;
}

@keyframes tourCardIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tour-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding-right: 20px; }
.tour-card__icon { color: var(--mud-palette-primary); flex-shrink: 0; }
.tour-card__title { font-weight: 700; font-size: 1rem; line-height: 1.2; color: var(--mud-palette-text-primary); }
.tour-card__body { font-size: .9rem; line-height: 1.5; color: var(--mud-palette-text-secondary); margin-bottom: 12px; }
.tour-card__foot { display: flex; align-items: center; gap: 6px; }
.tour-card__count { font-size: .72rem; color: var(--mud-palette-text-disabled); }

.tour-card__close {
    position: absolute;
    top: 8px; right: 10px;
    background: none; border: none;
    font-size: 20px; line-height: 1;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
}
.tour-card__close:hover { color: var(--mud-palette-text-primary); }

/* ===== Passos dos wizards de onboarding (classes "*-onb-passo") =====
   BUG corrigido: cada passo era um container flex (`display:flex`) contendo o ícone + texto
   solto com <b>. Num flex container, CADA <b> e cada trecho de texto vira um flex-item
   independente — com o `gap`, o parágrafo quebrava em pedaços que sobem/descem e pareciam ter
   tabulações. Aqui restauramos o fluxo normal de texto: o passo vira bloco (texto corre e
   quebra como parágrafo) e o ícone é posicionado à esquerda com recuo pendente (hanging indent).

   O seletor usa `div[class$="-onb-passo"]` (tipo + atributo) de propósito: especificidade maior
   que a regra `.x-onb-passo` de cada componente, então sobrepõe sem !important e corrige todos os
   wizards de uma vez (Documentos, Prontuário, Financeiro, Hub, etc.) — inclusive os futuros. */
div[class$="-onb-passo"] {
    display: block;
    position: relative;
    padding-left: 26px;
}

div[class$="-onb-passo"] > .mud-icon-root {
    position: absolute;
    left: 0;
    top: 2px;
}