/* lms-ajuda — visual da Ajuda contextual, autocontido.
 *
 * Replica a Ajuda do FerHelpDesk (pill, drawer da direita, header navy) SEM depender do Bootstrap:
 * badge, botões e o "x" de fechar vão desenhados aqui, porque as aplicações-alvo não têm todas o
 * Bootstrap carregado.
 *
 * As cores saem de var(--fer-azul) e var(--fer-navy) com fallback no padrão Fischer: onde a app já
 * define os tokens da marca, a ajuda se pinta sozinha; onde não define, cai no padrão.
 *
 * Prefixo lms- em tudo para não colidir com o CSS do hospedeiro.
 */

.lms-ajuda-fab {
    position: fixed; right: 92px; bottom: 24px; z-index: 100081;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem .95rem; border: none; border-radius: 24px;
    font-family: inherit; font-size: .85rem; font-weight: 600; line-height: 1.2; cursor: pointer;
    background: var(--fer-azul, #0057A8); color: var(--fer-branco, #fff);
    box-shadow: 0 6px 18px rgba(27, 42, 74, .28);
    transition: transform .12s;
}
.lms-ajuda-fab:hover { transform: translateY(-2px); }

.lms-ajuda-backdrop {
    position: fixed; inset: 0; background: rgba(20, 30, 55, .25);
    z-index: 100082; display: none;
}
.lms-ajuda-backdrop.show { display: block; }

.lms-ajuda-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 360px; max-width: 92vw;
    background: var(--fer-branco, #fff); color: #212529;
    font-family: inherit; font-size: .9rem; line-height: 1.5;
    z-index: 100083; box-shadow: -8px 0 24px rgba(0, 0, 0, .15);
    transform: translateX(100%); transition: transform .2s ease; overflow: auto;
}
.lms-ajuda-drawer.show { transform: translateX(0); }

.lms-ajuda-hd {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--fer-navy, #1B2A4A); color: #fff;
    padding: .6rem .9rem; font-weight: 600;
}
.lms-ajuda-x {
    background: none; border: none; color: #fff; cursor: pointer;
    font-size: 1.4rem; line-height: 1; padding: 0 .2rem; opacity: .85;
}
.lms-ajuda-x:hover { opacity: 1; }

.lms-ajuda-bd { padding: .9rem; }
.lms-ajuda-bd h5 { margin: .2rem 0 .3rem; font-size: 1.05rem; font-weight: 600; }
.lms-ajuda-muted { color: #6c757d; font-size: .82rem; margin: 0 0 .6rem; }

.lms-ajuda-badge {
    display: inline-block; margin-bottom: .5rem;
    padding: .2rem .5rem; border-radius: 4px;
    font-size: .72rem; font-weight: 600;
    background: color-mix(in srgb, var(--fer-azul, #0057A8) 12%, transparent);
    color: var(--fer-azul, #0057A8);
}

/* O artigo herda o corpo do drawer; só o espaçamento é ajustado, para o conteúdo consumir os
   tokens da app em vez de trazer cor própria. */
.lms-ajuda-conteudo { font-size: .84rem; }
.lms-ajuda-conteudo h5 { margin: .9rem 0 .35rem; font-size: .92rem; font-weight: 600; }
.lms-ajuda-conteudo p { margin: 0 0 .5rem; }
.lms-ajuda-conteudo ul, .lms-ajuda-conteudo ol { margin: 0 0 .6rem; padding-left: 1.2rem; }
.lms-ajuda-conteudo li { margin-bottom: .25rem; }
.lms-ajuda-conteudo code {
    background: rgba(0, 0, 0, .06); border-radius: 3px;
    padding: .05rem .25rem; font-size: .95em;
}

.lms-ajuda-btn {
    display: inline-block; margin-top: .6rem;
    padding: .35rem .8rem; border: 1px solid var(--fer-azul, #0057A8); border-radius: 4px;
    background: var(--fer-azul, #0057A8); color: #fff;
    font-family: inherit; font-size: .82rem; font-weight: 600;
    text-align: center; text-decoration: none; cursor: pointer;
}
.lms-ajuda-btn:hover { filter: brightness(1.08); color: #fff; }
.lms-ajuda-btn-full { display: block; width: 100%; }
.lms-ajuda-btn-out { background: transparent; color: var(--fer-azul, #0057A8); }
.lms-ajuda-btn-out:hover { background: rgba(0, 87, 168, .08); color: var(--fer-azul, #0057A8); }

/* ---------- tour ---------- */

/* O holofote: a sombra gigante escurece a tela inteira, menos este retângulo.
   pointer-events:none deixa a página continuar clicável por baixo. */
.lms-tour-ov {
    position: fixed; z-index: 100090; pointer-events: none;
    border-radius: 6px;
    box-shadow: 0 0 0 9999px rgba(20, 30, 55, .55);
    transition: top .2s, left .2s, width .2s, height .2s;
}

.lms-tour-pop {
    position: fixed; z-index: 100091; max-width: 320px;
    background: #fff; color: #212529; border-radius: 6px;
    font-family: inherit; font-size: .85rem; line-height: 1.45;
    padding: .75rem .85rem; box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
}
.lms-tour-tit { font-weight: 600; margin-bottom: .25rem; color: var(--fer-navy, #1B2A4A); }
.lms-tour-txt { font-size: .82rem; }
.lms-tour-pe {
    display: flex; justify-content: space-between; align-items: center;
    gap: .5rem; margin-top: .7rem;
}
.lms-tour-prog { font-size: .75rem; color: #6c757d; }
.lms-tour-b {
    margin-left: .3rem; padding: .25rem .7rem;
    border: 1px solid var(--fer-azul, #0057A8); border-radius: 4px;
    background: transparent; color: var(--fer-azul, #0057A8);
    font-family: inherit; font-size: .78rem; font-weight: 600; cursor: pointer;
}
.lms-tour-b-p { background: var(--fer-azul, #0057A8); color: #fff; }
.lms-tour-b:hover { filter: brightness(1.08); }

@media (max-width: 480px) {
    .lms-ajuda-fab { right: 16px; bottom: 16px; }
    .lms-tour-pop { max-width: calc(100vw - 24px); }
}