/* Painel de ajuda, cartões flutuantes ("O que há de novo", boas-vindas) e tour. Usa os tokens das telas (claro/escuro
 * e cores da marca) com valores de reserva para páginas que não os definem. */
.aj-painel, .aj-flutuante, .aj-tour, .aj-chip {
    --aj-fundo: var(--bg-sidebar, #ffffff);
    --aj-texto: var(--text-main, #202c3e);
    --aj-suave: var(--text-muted, #5f6d82);
    --aj-borda: var(--border-color, #e4e9ef);
    --aj-cor: var(--primary-color, #00bfa5);
    --aj-cor-suave: var(--accent-soft, color-mix(in srgb, var(--aj-cor) 10%, var(--aj-fundo)));
    --aj-cor-texto: var(--accent-text, color-mix(in srgb, var(--aj-cor) 65%, #162235));
    --aj-sobre-cor: var(--on-primary, #ffffff);
    --aj-sombra: var(--shadow-pop, 0 18px 54px #00000024);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--aj-texto);
    box-sizing: border-box;
}
.aj-painel *, .aj-flutuante *, .aj-tour *, .aj-chip * { box-sizing: border-box; }
.aj-painel [hidden], .aj-flutuante [hidden], .aj-tour [hidden] { display: none !important; }
.aj-painel :focus-visible, .aj-flutuante :focus-visible, .aj-tour :focus-visible, .aj-chip :focus-visible { outline: 2px solid var(--aj-cor); outline-offset: 2px; }

/* ---------------------------------------------------------------- painel lateral */
.aj-painel { position: fixed; inset: 0; z-index: 2147482000; display: flex; justify-content: flex-end; }
.aj-painel[hidden] { display: none; }
.aj-painel-fundo { position: absolute; inset: 0; background: #0b132b59; }
.aj-painel-caixa {
    position: relative; display: flex; flex-direction: column; width: min(440px, 100vw); height: 100%;
    background: var(--aj-fundo); border-left: 1px solid var(--aj-borda); box-shadow: var(--aj-sombra);
    animation: aj-entrar .18s ease-out;
}
@keyframes aj-entrar { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .aj-painel-caixa { animation: none; } }
.aj-painel-topo { display: flex; align-items: center; gap: 8px; padding: 14px 14px 10px 18px; border-bottom: 1px solid var(--aj-borda); }
.aj-painel-topo h2 { flex: 1; margin: 0; font-size: 16px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aj-painel-marca { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--aj-cor-suave); color: var(--aj-cor-texto); }
.aj-painel-icone {
    display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid transparent; border-radius: 9px;
    background: transparent; color: var(--aj-suave); cursor: pointer; text-decoration: none; font: inherit;
}
.aj-painel-icone:hover { background: var(--aj-cor-suave); color: var(--aj-texto); }
.aj-painel-busca-linha { position: relative; margin: 12px 16px 4px; }
.aj-painel-busca-linha .bi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--aj-suave); pointer-events: none; }
.aj-painel-busca {
    width: 100%; height: 40px; padding: 0 12px 0 36px; border: 1px solid var(--aj-borda); border-radius: 10px;
    background: var(--bg-input, var(--aj-fundo)); color: var(--aj-texto); font: inherit;
}
.aj-painel-busca:focus { outline: 2px solid var(--aj-cor); outline-offset: 0; border-color: transparent; }
.aj-painel-corpo { flex: 1; overflow-y: auto; padding: 8px 16px 18px; overscroll-behavior: contain; }
.aj-painel-rodape { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--aj-borda); }
.aj-painel-rodape a, .aj-painel-rodape button { color: var(--aj-cor-texto); font: inherit; font-weight: 650; text-decoration: none; background: none; border: 0; padding: 4px 0; cursor: pointer; }
.aj-painel-rodape a:hover, .aj-painel-rodape button:hover { text-decoration: underline; }
.aj-painel-secao { margin-top: 14px; }
.aj-painel-secao > h3 { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--aj-suave); }
.aj-painel-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.aj-painel-item { display: grid; gap: 2px; padding: 9px 11px; border-radius: 10px; color: var(--aj-texto); text-decoration: none; border: 1px solid transparent; }
.aj-painel-item:hover, .aj-painel-item:focus-visible { background: var(--aj-cor-suave); border-color: var(--aj-borda); }
.aj-painel-item strong { font-weight: 700; }
.aj-painel-item span { color: var(--aj-suave); font-size: 13px; }
.aj-painel-categoria { border-bottom: 1px solid var(--aj-borda); }
.aj-painel-categoria summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 4px; cursor: pointer; font-weight: 700; list-style: none; }
.aj-painel-categoria summary::-webkit-details-marker { display: none; }
.aj-painel-categoria summary::after { content: '\F282'; font-family: 'bootstrap-icons'; color: var(--aj-suave); transition: transform .15s; }
.aj-painel-categoria[open] summary::after { transform: rotate(180deg); }
.aj-painel-categoria summary small { margin-left: auto; color: var(--aj-suave); font-weight: 600; }
.aj-painel-categoria .aj-painel-lista { padding-bottom: 8px; }
.aj-painel-aviso { display: flex; align-items: center; gap: 8px; margin: 18px 0; color: var(--aj-suave); }
.aj-painel-aviso--erro { color: var(--danger, #b54545); }
.aj-painel-contagem { margin: 12px 0 8px; color: var(--aj-suave); }
.aj-painel-artigo-titulo { margin: 12px 0 6px; font-size: 19px; line-height: 1.3; font-weight: 800; }
.aj-painel-artigo-titulo:focus { outline: none; }

/* conteúdo dos artigos (também usado pelas páginas da central) */
.aj-md { overflow-wrap: anywhere; }
.aj-md > :first-child { margin-top: 0; }
.aj-md h2, .aj-md h3, .aj-md h4 { margin: 18px 0 6px; line-height: 1.3; }
.aj-md h2 { font-size: 17px; } .aj-md h3 { font-size: 15px; } .aj-md h4 { font-size: 14px; }
.aj-md p, .aj-md ul, .aj-md ol, .aj-md blockquote { margin: 0 0 10px; }
.aj-md ul, .aj-md ol { padding-left: 20px; }
.aj-md li { margin: 3px 0; }
.aj-md a { color: var(--aj-cor-texto, var(--accent-text)); font-weight: 600; }
.aj-md code { padding: 1px 5px; border-radius: 5px; background: var(--aj-cor-suave, var(--accent-soft)); font-size: .92em; }
.aj-md pre { overflow-x: auto; padding: 10px; border-radius: 8px; background: var(--aj-cor-suave, var(--accent-soft)); }
.aj-md blockquote { padding: 8px 12px; border-left: 3px solid var(--aj-cor, var(--primary-color)); background: var(--aj-cor-suave, var(--accent-soft)); border-radius: 0 8px 8px 0; }
.aj-md blockquote p:last-child { margin-bottom: 0; }
.aj-md .md-tabela { overflow-x: auto; margin: 0 0 12px; }
.aj-md table { border-collapse: collapse; min-width: 100%; font-size: 13px; }
.aj-md th, .aj-md td { padding: 6px 8px; border: 1px solid var(--aj-borda, var(--border-color)); text-align: left; vertical-align: top; }
.aj-md th { background: var(--aj-cor-suave, var(--accent-soft)); }
.aj-figura { margin: 12px 0 16px; }
.aj-figura img { display: block; width: 100%; height: auto; border: 1px solid var(--aj-borda, var(--border-color)); border-radius: 10px; }
.aj-figura figcaption { margin-top: 6px; font-size: 12px; color: var(--aj-suave, var(--text-muted)); }

/* "Isso ajudou?" */
.aj-feedback { margin-top: 22px; padding: 14px; border: 1px solid var(--aj-borda); border-radius: 12px; }
.aj-feedback h3 { margin: 0 0 8px; font-size: 14px; }
.aj-feedback-botoes { display: flex; gap: 8px; }
.aj-feedback-botao, .aj-feedback-enviar {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--aj-borda); border-radius: 9px;
    background: var(--aj-fundo); color: var(--aj-texto); font: inherit; font-weight: 650; cursor: pointer;
}
.aj-feedback-botao[aria-pressed="true"] { background: var(--aj-cor-suave); border-color: var(--aj-cor); color: var(--aj-cor-texto); }
.aj-feedback-comentario { display: grid; gap: 8px; margin-top: 10px; }
.aj-feedback-comentario textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--aj-borda); border-radius: 9px; background: var(--bg-input, var(--aj-fundo)); color: var(--aj-texto); font: inherit; resize: vertical; }
.aj-feedback-enviar { justify-self: start; background: var(--aj-cor); border-color: var(--aj-cor); color: var(--aj-sobre-cor); }
.aj-feedback-status { margin: 8px 0 0; min-height: 1em; color: var(--aj-suave); font-size: 13px; }

/* ---------------------------------------------------------------- cartões flutuantes */
.aj-flutuante {
    position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 2147481000;
    width: min(400px, calc(100vw - 24px)); max-height: min(70vh, 620px); display: flex; flex-direction: column;
    background: var(--aj-fundo); border: 1px solid var(--aj-borda); border-radius: 16px; box-shadow: var(--aj-sombra);
    animation: aj-subir .2s ease-out;
}
@keyframes aj-subir { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .aj-flutuante { animation: none; } }
.aj-flutuante > header { display: flex; align-items: flex-start; gap: 10px; padding: 14px 12px 6px 16px; }
.aj-flutuante > header > div { flex: 1; min-width: 0; }
.aj-flutuante h2 { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.3; }
.aj-flutuante-kicker { display: block; color: var(--aj-cor-texto); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.aj-flutuante-icone { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--aj-cor-suave); color: var(--aj-cor-texto); font-size: 17px; }
.aj-flutuante-fechar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--aj-suave); cursor: pointer; }
.aj-flutuante-fechar:hover { background: var(--aj-cor-suave); color: var(--aj-texto); }
.aj-flutuante-corpo { overflow-y: auto; padding: 4px 16px 6px; }
.aj-flutuante-corpo p { margin: 0 0 8px; }
.aj-flutuante-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 10px 14px 14px; }
.aj-flutuante-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--aj-borda);
    border-radius: 9px; background: var(--aj-fundo); color: var(--aj-texto); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.aj-flutuante-btn:hover { border-color: var(--aj-cor); }
.aj-flutuante-btn.is-principal { background: var(--aj-cor); border-color: var(--aj-cor); color: var(--aj-sobre-cor); }
.aj-flutuante-btn:disabled { opacity: .45; cursor: not-allowed; }
.aj-flutuante--destaque { border-top: 4px solid var(--aj-cor); }
.aj-novidade { padding: 10px 0; border-top: 1px solid var(--aj-borda); }
.aj-novidade:first-child { border-top: 0; padding-top: 0; }
.aj-novidade h3 { margin: 0 0 4px; font-size: 14px; font-weight: 800; }
.aj-novidade h4 { margin: 8px 0 2px; font-size: 12px; color: var(--aj-suave); text-transform: uppercase; letter-spacing: .05em; }
.aj-novidade ul { margin: 0; padding-left: 18px; }
.aj-novidade li { margin: 3px 0; font-size: 13px; }
.aj-novidade--comunicado { background: var(--aj-cor-suave); margin: 0 -16px 8px; padding: 10px 16px; border: 0; }
.aj-muted { color: var(--aj-suave, var(--text-muted)); font-size: 13px; }

/* convite discreto dos primeiros passos (páginas da administração) */
.aj-chip { position: fixed; left: calc(var(--ui-rail-width, 68px) + 14px); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 2147480000; display: flex; align-items: center; border-radius: 999px; background: var(--aj-fundo); border: 1px solid var(--aj-borda); box-shadow: var(--aj-sombra); }
.aj-chip-passos { display: inline-flex; align-items: center; gap: 8px; padding: 8px 6px 8px 14px; color: var(--aj-texto); font-weight: 700; text-decoration: none; }
.aj-chip-passos .bi { color: var(--aj-cor-texto); }
.aj-chip-ocultar { display: grid; place-items: center; width: 30px; height: 30px; margin-right: 4px; border: 0; border-radius: 50%; background: transparent; color: var(--aj-suave); cursor: pointer; }
.aj-chip-ocultar:hover { background: var(--aj-cor-suave); }
@media (max-width: 720px) { .aj-chip { left: 12px; } }

/* ---------------------------------------------------------------- tour */
.aj-tour { position: fixed; inset: 0; z-index: 2147483000; }
.aj-tour-destaque { position: fixed; border-radius: 12px; box-shadow: 0 0 0 3px var(--aj-cor), 0 0 0 9999px #0b132b8c; transition: all .2s ease; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .aj-tour-destaque { transition: none; } }
.aj-tour-balao { position: fixed; padding: 16px; background: var(--aj-fundo); border-radius: 14px; box-shadow: var(--aj-sombra); }
.aj-tour-balao:focus { outline: none; }
.aj-tour-balao h2 { margin: 2px 0 6px; font-size: 16px; font-weight: 800; }
.aj-tour-balao p { margin: 0 0 6px; color: var(--aj-texto); }
.aj-tour-balao .aj-flutuante-acoes { padding: 8px 0 0; align-items: center; }
.aj-tour-pular { margin-right: auto; padding: 4px 0; border: 0; background: none; color: var(--aj-suave); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.aj-painel-aberto, .aj-painel-aberto body { overflow: hidden; }
@media (max-width: 480px) {
    .aj-flutuante { right: 12px; left: 12px; width: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}