/* ══════════════════════════════════════════════════════════════════════════
   Motor de tutorial — modo "ao vivo" (holofote sobre a tela real)
   Tokens vêm do Design System FAPEU (public/css/app.css). Fallbacks presentes
   porque as telas de login não carregam o layout principal.
   ══════════════════════════════════════════════════════════════════════════ */

#tutor-raiz {
    /* --primary é o token do tema atual do portal (resources/css/app.css) e
       acompanha o modo escuro. --color-principal é o verde fixo do app.css
       legado, usado nas telas que não carregam o tema (login). O literal só
       entra se nenhum dos dois existir. */
    --tutor-verde:        var(--primary, var(--color-principal, #0D9571));
    --tutor-verde-escuro: var(--foreground, var(--color-verde-escuro, #074635));
    --tutor-carvao:       var(--foreground, var(--color-carvao, #3E3E3F));
    --tutor-cinza:        var(--muted-foreground, var(--color-cinza-medio, #6C757D));
    --tutor-cartao:       var(--card, #fff);
    --tutor-borda:        var(--border, #E9ECEF);
    --tutor-raio:         var(--radius-card, 16px);
    --tutor-raio-btn:     var(--radius-btn, 8px);
    --tutor-raio-recorte: 10px;

    position: fixed;
    inset: 0;
    z-index: 20000;
    font-family: "DM Sans", system-ui, sans-serif;
    pointer-events: none;
}

#tutor-raiz[hidden] { display: none; }

/* ── Escurecimento: um retângulo com sombra espalhada ─────────────────────
   O recorte é o próprio elemento; a sombra de 9999px pinta todo o resto da
   tela. Uma peça só, então não há emenda entre faixas nem canto quadrado
   sobrando em volta do anel arredondado.

   A cor é um quase-preto levemente esverdeado, não o verde da marca: sobre
   uma tela branca um verde saturado a 55% não lê como "apagado", lê como um
   bloco verde chapado por cima do conteúdo. */
.tutor-buraco {
    position: fixed;
    border-radius: var(--tutor-raio-recorte);
    box-shadow: 0 0 0 9999px rgba(8, 26, 21, .58);
    pointer-events: none;
    transition: all .28s cubic-bezier(.4, 0, .2, 1);
}

/* As faixas não pintam nada: existem só para barrar o clique fora do alvo,
   sem mexer no z-index (nem no estilo) do elemento destacado. */
.tutor-faixa {
    position: fixed;
    background: transparent;
    pointer-events: auto;
}

.tutor-sem-animacao .tutor-buraco { transition: none; }

/* ── Passo narrado: cortina sem recorte ───────────────────────────────────
   O passo narrado conta a etapa que acontece fora do portal, então não há o
   que destacar. O JS ainda manda a caixa (um ponto no centro da viewport) para
   o balão ter de onde medir a folga — é aqui que o recorte some.

   O !important existe porque reposicionar() escreve left/top/width/height
   inline nos três elementos a cada quadro; sem ele o CSS perde para o inline.

   O escurecimento troca de técnica: em vez do recorte com sombra de 9999px,
   vira um retângulo chapado do tamanho da tela. Um buraco de 6px no meio de
   uma tela escurecida seria um furo visível apontando para coisa nenhuma. */
.tutor-narrado .tutor-buraco {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: rgba(8, 26, 21, .58);
}

/* As faixas continuam sendo o que barra o clique — agora na tela inteira. */
.tutor-narrado .tutor-faixa {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Sem alvo não há o que emoldurar, nem para onde a seta do balão apontar. */
.tutor-narrado .tutor-anel,
.tutor-narrado .tutor-balao-seta { display: none !important; }

/* ── Anel em volta do alvo ─────────────────────────────────────────────── */
.tutor-anel {
    position: fixed;
    /* O anel e o recorte recebem o MESMO retângulo do JS. Sem border-box a
       borda somaria 4px à largura do anel e ele descolaria do recorte. */
    box-sizing: border-box;
    border: 2px solid var(--tutor-verde);
    border-radius: var(--tutor-raio-recorte);
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--tutor-verde) 28%, transparent);
    pointer-events: none;
    transition: all .28s cubic-bezier(.4, 0, .2, 1);
}

.tutor-sem-animacao .tutor-anel { transition: none; animation: none; }

.tutor-anel.tutor-clicavel { animation: tutor-pulsar 1.8s ease-out infinite; }

@keyframes tutor-pulsar {
    0%   { box-shadow: 0 0 0 4px color-mix(in oklch, var(--tutor-verde) 38%, transparent); }
    70%  { box-shadow: 0 0 0 14px color-mix(in oklch, var(--tutor-verde) 0%, transparent); }
    100% { box-shadow: 0 0 0 4px color-mix(in oklch, var(--tutor-verde) 0%, transparent); }
}

/* ── Balão ────────────────────────────────────────────────────────────── */
.tutor-balao {
    position: fixed;
    width: min(360px, calc(100vw - 32px));
    background: var(--tutor-cartao);
    border: 1px solid var(--tutor-borda);
    border-radius: var(--tutor-raio);
    box-shadow: 0 2px 6px rgba(8, 26, 21, .06), 0 20px 48px rgba(8, 26, 21, .22);
    padding: 18px 20px 16px;
    pointer-events: auto;
    color: var(--tutor-carvao);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), top .28s cubic-bezier(.4, 0, .2, 1), left .28s cubic-bezier(.4, 0, .2, 1);
}

.tutor-sem-animacao .tutor-balao { transition: none; }

.tutor-balao:focus { outline: none; }

.tutor-balao-seta {
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--tutor-cartao);
    border: 1px solid var(--tutor-borda);
    transform: rotate(45deg);
}

/* Só as duas bordas viradas para fora ficam visíveis — as outras duas
   encostariam no corpo do balão e desenhariam um risco atravessado nele. */
.tutor-balao[data-lado="baixo"]    .tutor-balao-seta { border-right: 0; border-bottom: 0; }
.tutor-balao[data-lado="cima"]     .tutor-balao-seta { border-left: 0; border-top: 0; }
.tutor-balao[data-lado="direita"]  .tutor-balao-seta { border-right: 0; border-top: 0; }
.tutor-balao[data-lado="esquerda"] .tutor-balao-seta { border-left: 0; border-bottom: 0; }

.tutor-balao[data-lado="baixo"]  .tutor-balao-seta { top: -7px; }
.tutor-balao[data-lado="cima"]   .tutor-balao-seta { bottom: -7px; }
.tutor-balao[data-lado="direita"] .tutor-balao-seta { left: -7px; }
.tutor-balao[data-lado="esquerda"] .tutor-balao-seta { right: -7px; }

.tutor-balao-contador {
    font-size: var(--text-xs, .68rem);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tutor-verde);
    margin-bottom: 6px;
}

.tutor-balao-titulo {
    font-size: var(--text-lg, 1rem);
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--tutor-verde-escuro);
    line-height: 1.3;
}

.tutor-balao-texto {
    font-size: var(--text-base, .875rem);
    line-height: 1.55;
    margin: 0 0 14px;
    color: var(--tutor-cinza);
}

.tutor-balao-dica {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm, .78rem);
    font-weight: 600;
    color: var(--tutor-verde);
    background: color-mix(in oklch, var(--tutor-verde) 10%, transparent);
    border-radius: var(--tutor-raio-btn);
    padding: 8px 10px;
    margin-bottom: 12px;
}

.tutor-balao-acoes {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Prefixo "balao" porque .tutor-btn sozinho colidiria com outros componentes
   de tutorial carregados na mesma página. */
.tutor-balao-btn {
    font-family: inherit;
    font-size: var(--text-sm, .78rem);
    font-weight: 600;
    border-radius: var(--tutor-raio-btn);
    border: 0;
    padding: 8px 16px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.tutor-balao-btn-principal {
    background: var(--tutor-verde);
    color: var(--primary-foreground, #fff);
}

.tutor-balao-btn-principal:hover {
    background: color-mix(in oklch, var(--tutor-verde) 86%, #000);
}

.tutor-balao-btn-secundario {
    background: transparent;
    color: var(--tutor-cinza);
    border: 1px solid var(--tutor-borda);
}

.tutor-balao-btn-secundario:hover {
    background: color-mix(in oklch, var(--tutor-carvao) 6%, transparent);
    color: var(--tutor-carvao);
}

.tutor-balao-btn:focus-visible {
    outline: 3px solid color-mix(in oklch, var(--tutor-verde) 45%, transparent);
    outline-offset: 2px;
}

.tutor-balao-sair {
    margin-left: auto;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: var(--text-sm, .78rem);
    color: var(--tutor-cinza);
    text-decoration: underline;
    cursor: pointer;
    padding: 4px;
}

.tutor-balao-sair:hover { color: var(--tutor-carvao); }

/* ── Aviso de falha honesta ───────────────────────────────────────────── */
.tutor-aviso {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    max-width: min(460px, calc(100vw - 32px));
    background: var(--tutor-cartao);
    border: 1px solid var(--tutor-borda);
    border-left: 4px solid #E0A800;
    border-radius: var(--tutor-raio-btn);
    box-shadow: 0 12px 32px rgba(8, 26, 21, .2);
    padding: 14px 18px;
    font-size: var(--text-base, .875rem);
    line-height: 1.5;
    color: var(--tutor-carvao);
    pointer-events: auto;
    z-index: 20001;
}

.tutor-aviso strong { display: block; margin-bottom: 3px; color: var(--tutor-verde-escuro); }

@media (prefers-reduced-motion: reduce) {
    .tutor-buraco,
    .tutor-anel,
    .tutor-balao { transition: none !important; }
    .tutor-anel.tutor-clicavel { animation: none !important; }
}