/* ************************************************************************************************** */
/* CENTRAL DE AJUDA (Fase 2)                                                                          */
/*                                                                                                    */
/* A tela que responde "onde fica isso?" e "qual e a ordem das coisas?", complementando a ajuda        */
/* de tela da Fase 1 (packets/ajuda/css/index.css), que responde "como uso ESTA tela?". Carregada      */
/* como um modulo comum do SPA (modulos/ajuda_central), nao mais como modal.                          */
/*                                                                                                    */
/* Mesma linguagem visual da ajuda contextual — cartao fechado, faixa de titulo colorida, icone em     */
/* selo — com duas diferencas que existem por causa do volume: 1) modulo e fluxo nascem RECOLHIDOS,    */
/* porque 90 telas e 65 etapas abertas de uma vez sao uma parede de texto; 2) a cor identifica o       */
/* MODULO (sao 6 familias em rodizio pela ordem do menu), e nao o tipo de conteudo, para o olho achar  */
/* "o cartao do Financeiro" antes de ler qualquer palavra.                                            */
/* ************************************************************************************************** */

.ajuda-central {
    --ac-cinza-texto: #7d858f;
    --ac-cinza-fraco: #eef0f3;

    color: var(--cor-texto-padrao);
    font-size: 14px;
    line-height: 1.6;
    /* Texto corrido (resumos, passo a passo, glossário) fica ilegível esticado na
       largura toda do conteúdo — igual a qualquer coluna de leitura, tem um limite. */
    max-width: 1040px;
    margin: 0 auto;
}


/* ─── As 6 familias de cor ──────────────────────────────────────────────────── */

/* Cada familia e um par forte/fraco: -cor pinta selo e numero, -fundo e a faixa do
   titulo, -corpo e o miolo (mais claro que a faixa), -borda fecha o cartao. Os quatro
   primeiros sao os mesmos da ajuda de tela; ciano e coral entram para o rodizio fechar
   em 6 sem repetir cor em modulos vizinhos. */

.ajuda-central .ac-cor-0 {
    --ac-cor: #4180d6;
    --ac-cor-texto: #2f66ad;
    --ac-cor-fundo: #e3edfb;
    --ac-cor-corpo: #f6f9fe;
    --ac-cor-borda: #d3e2f7;
}

.ajuda-central .ac-cor-1 {
    --ac-cor: #2f8f6b;
    --ac-cor-texto: #24705a;
    --ac-cor-fundo: #e4f2ec;
    --ac-cor-corpo: #f6fbf9;
    --ac-cor-borda: #d2e9df;
}

.ajuda-central .ac-cor-2 {
    --ac-cor: #d69a3a;
    --ac-cor-texto: #9c6413;
    --ac-cor-fundo: #fbeed6;
    --ac-cor-corpo: #fdfaf3;
    --ac-cor-borda: #f0dcbe;
}

.ajuda-central .ac-cor-3 {
    --ac-cor: #895fc5;
    --ac-cor-texto: #6b47a4;
    --ac-cor-fundo: #ece2f9;
    --ac-cor-corpo: #f9f6fd;
    --ac-cor-borda: #e0d2f4;
}

.ajuda-central .ac-cor-4 {
    --ac-cor: #2b8ca3;
    --ac-cor-texto: #216f83;
    --ac-cor-fundo: #ddeff4;
    --ac-cor-corpo: #f4fbfd;
    --ac-cor-borda: #c9e5ed;
}

.ajuda-central .ac-cor-5 {
    --ac-cor: #d16a63;
    --ac-cor-texto: #a84c47;
    --ac-cor-fundo: #fae6e4;
    --ac-cor-corpo: #fdf7f6;
    --ac-cor-borda: #f2d5d2;
}


/* ─── Campo de busca ────────────────────────────────────────────────────────── */

/* Gruda no topo: em 90 telas o cliente rola bastante, e o campo e a saida de qualquer
   lista longa. Quem rola e a pagina inteira (a Central e um modulo comum, nao um modal
   com area propria), por isso o top soma a altura fixa da barra-topo (50px). */
.ajuda-central .ac-busca {
    position: sticky;
    top: 50px;
    z-index: 3;
    /* sticky ja e posicionado: a lupa e o "x" (absolute) se resolvem por esta caixa. */
    display: flex;
    align-items: center;
    background: #fff;
    padding: 2px 0 10px 0;
}

.ajuda-central .ac-busca-lupa {
    position: absolute;
    left: 15px;
    font-size: 14px;
    color: #4180d6;
    pointer-events: none;
}

.ajuda-central .ac-busca-input {
    width: 100%;
    height: 44px;
    padding: 0 40px;
    font-size: 14.5px;
    font-family: inherit;
    color: var(--cor-texto-padrao);
    background: #f3f7fd;
    border: solid 1px #dbe6f7;
    border-radius: 22px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.ajuda-central .ac-busca-input:focus {
    background: #fff;
    border-color: #4180d6;
    box-shadow: 0 0 0 3px var(--cor-anel-foco);
}

.ajuda-central .ac-busca-input::placeholder {
    color: #9aa4b1;
}

.ajuda-central .ac-busca-limpar {
    display: none;
    position: absolute;
    right: 16px;
    font-size: 15px;
    color: var(--ac-cinza-texto);
    cursor: pointer;
}

.ajuda-central .ac-busca-limpar:hover {
    color: var(--cor-vermelha2);
}


/* ─── Abas ──────────────────────────────────────────────────────────────────── */

/* Cada aba tem a cor da sua secao (azul/verde/roxo) e leva essa cor para o painel:
   trocar de aba muda o acento da janela inteira, o que sozinho ja diz onde se esta. */
.ajuda-central .ac-abas {
    position: sticky;
    top: 106px;
    z-index: 2;
    display: flex;
    gap: 8px;
    background: #fff;
    border-bottom: solid 1px var(--borda-cor-padrao);
    margin-bottom: 18px;
    margin-top: 30px;
}

.ajuda-central .ac-aba {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ac-cinza-texto);
    border-bottom: solid 2px transparent;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.ajuda-central .ac-aba:hover {
    color: var(--ac-cor-texto);
    background: var(--ac-cor-corpo);
}

.ajuda-central .ac-aba-ativa {
    color: var(--ac-cor-texto);
    background: var(--ac-cor-fundo);
    border-bottom-color: var(--ac-cor);
}

.ajuda-central .ac-aba i {
    font-size: 13px;
}

.ajuda-central .ac-aba-contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ac-cinza-texto);
    background: var(--ac-cinza-fraco);
    border-radius: 9px;
}

.ajuda-central .ac-aba-ativa .ac-aba-contador {
    color: #fff;
    background: var(--ac-cor);
}

/* Enquanto se busca, as tres abas aparecem juntas: o cliente digitou uma palavra, nao
   escolheu uma categoria — esconder dois tercos do resultado atras de uma aba seria
   esconder justamente a resposta. */
.ajuda-central .ac-painel {
    display: none;
}

.ajuda-central .ac-painel-ativo,
.ajuda-central.ac-buscando .ac-painel {
    display: block;
}

.ajuda-central.ac-buscando .ac-painel-sem-resultado {
    display: none;
}

.ajuda-central .ac-painel-titulo {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ac-cor-texto);
    margin: 6px 0 12px 0;
}

.ajuda-central.ac-buscando .ac-painel-titulo {
    display: flex;
}

.ajuda-central .ac-painel-contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 17px;
    padding: 0 6px;
    font-size: 10.5px;
    color: #fff;
    background: var(--ac-cor);
    border-radius: 9px;
    letter-spacing: 0;
}

.ajuda-central .ac-oculto {
    display: none !important;
}


/* ─── Capa de cada aba ──────────────────────────────────────────────────────── */

/* Mesmo cartao de "PARA QUE SERVE ESTA TELA" da ajuda contextual, aqui dizendo em uma
   linha o que a aba responde. Durante a busca vira ruido e sai de cena. */
.ajuda-central .ac-capa {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--ac-cor-corpo);
    border: solid 1px var(--ac-cor-borda);
    border-radius: 10px;
    padding: 13px 16px;
    margin-bottom: 16px;
}

.ajuda-central.ac-buscando .ac-capa {
    display: none;
}

.ajuda-central .ac-capa-icone {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--ac-cor);
    color: #fff;
    font-size: 15px;
}

.ajuda-central .ac-capa-rotulo {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ac-cor-texto);
    margin-bottom: 1px;
}

.ajuda-central .ac-capa-texto {
    font-size: 13px;
    color: var(--cor-titulo2);
    line-height: 1.55;
}


/* ─── Aba Telas: um cartao por modulo, recolhido ────────────────────────────── */

.ajuda-central .ac-grupo {
    border: solid 1px var(--ac-cor-borda);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 9px;
    transition: box-shadow 0.15s ease;
}

.ajuda-central .ac-grupo:hover {
    box-shadow: 0 2px 8px rgba(45, 65, 95, 0.07);
}

.ajuda-central .ac-grupo-titulo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 15px;
    background: var(--ac-cor-fundo);
    cursor: pointer;
    user-select: none;
}

/* Icone do modulo em selo quadrado, como no titulo dos cartoes da ajuda de tela. */
.ajuda-central .ac-grupo-icone {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--ac-cor);
    color: #fff;
}

.ajuda-central .ac-grupo-icone i {
    font-size: 15px;
    color: #fff;
}

.ajuda-central .ac-grupo-nome {
    flex: 1 1 auto;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ac-cor-texto);
}

.ajuda-central .ac-grupo-contador {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--ac-cor-texto);
    background: #fff;
    border: solid 1px var(--ac-cor-borda);
    border-radius: 10px;
    padding: 1px 9px;
}

.ajuda-central .ac-grupo-seta {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--ac-cor);
    transition: transform 0.2s ease;
}

.ajuda-central .ac-grupo-itens {
    display: none;
    padding: 10px 12px 12px 12px;
    background: var(--ac-cor-corpo);
    border-top: solid 1px var(--ac-cor-borda);
}

.ajuda-central .ac-grupo-aberto .ac-grupo-itens {
    display: block;
}

.ajuda-central .ac-grupo-aberto .ac-grupo-seta {
    transform: rotate(180deg);
}


/* ─── Aba Telas: cada tela dentro do modulo ─────────────────────────────────── */

.ajuda-central .ac-tela {
    background: #fff;
    border: solid 1px var(--ac-cor-borda);
    border-radius: 8px;
    margin-bottom: 6px;
    overflow: hidden;
}

.ajuda-central .ac-tela:last-child {
    margin-bottom: 0;
}

.ajuda-central .ac-tela-topo {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 13px;
    cursor: pointer;
}

.ajuda-central .ac-tela-aberta .ac-tela-topo {
    background: var(--ac-cor-fundo);
}

.ajuda-central .ac-tela-texto {
    flex: 1 1 auto;
    min-width: 0;
}

.ajuda-central .ac-tela-nome {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cor-titulo2);
}

.ajuda-central .ac-tela-caminho {
    font-size: 11px;
    color: var(--ac-cor-texto);
    margin-bottom: 3px;
}

/* Duas linhas bastam para decidir se e esta a tela: o texto inteiro esta a um clique,
   e sem o corte a lista de um modulo grande volta a ser parede de texto. */
.ajuda-central .ac-tela-resumo {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px;
    color: var(--ac-cinza-texto);
    line-height: 1.5;
}

/* Com a tela aberta, a capa da propria ajuda repete o resumo logo abaixo. */
.ajuda-central .ac-tela-aberta .ac-tela-resumo {
    display: none;
}

.ajuda-central .ac-tela-seta {
    flex: 0 0 auto;
    margin-top: 3px;
    font-size: 11px;
    color: #b9c0c9;
    transition: transform 0.2s ease, color 0.15s ease;
}

.ajuda-central .ac-tela-aberta .ac-tela-seta {
    transform: rotate(180deg);
    color: var(--ac-cor);
}

/* O corpo e o MESMO conteudo do modal "?" da tela (packets/ajuda): a Central nao
   reescreve a ajuda, ela so traz a ajuda ate aqui. */
.ajuda-central .ac-tela-corpo {
    display: none;
    padding: 13px;
    border-top: solid 1px var(--ac-cor-borda);
}

.ajuda-central .ac-tela-aberta .ac-tela-corpo {
    display: block;
}

.ajuda-central .ac-carregando {
    display: flex;
    justify-content: center;
    padding: 14px 0;
}

.ajuda-central .ac-erro {
    color: var(--cor-vermelha2);
    font-size: 13px;
    text-align: center;
    padding: 10px 0;
}


/* ─── Aba Fluxos ────────────────────────────────────────────────────────────── */

.ajuda-central .ac-fluxo {
    border: solid 1px var(--ac-cor-borda);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 9px;
    transition: box-shadow 0.15s ease;
}

.ajuda-central .ac-fluxo:hover {
    box-shadow: 0 2px 8px rgba(45, 65, 95, 0.07);
}

.ajuda-central .ac-fluxo-topo {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 13px 15px;
    background: var(--ac-cor-fundo);
    cursor: pointer;
    user-select: none;
}

.ajuda-central .ac-fluxo-icone {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--ac-cor);
    color: #fff;
    font-size: 15px;
}

.ajuda-central .ac-fluxo-texto {
    flex: 1 1 auto;
    min-width: 0;
}

/* Nome e contagem de etapas dividem a mesma linha: em 9 cartoes, uma linha a menos
   por cartao e quase um terco da altura da aba. */
.ajuda-central .ac-fluxo-linha {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ajuda-central .ac-fluxo-nome {
    flex: 1 1 auto;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ac-cor-texto);
}

.ajuda-central .ac-fluxo-resumo {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px;
    color: var(--cor-titulo2);
    line-height: 1.5;
}

.ajuda-central .ac-fluxo-aberto .ac-fluxo-resumo {
    -webkit-line-clamp: unset;
}

.ajuda-central .ac-fluxo-contador {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 11.5px;
    color: var(--ac-cor-texto);
    background: #fff;
    border: solid 1px var(--ac-cor-borda);
    border-radius: 10px;
    padding: 1px 9px;
}

.ajuda-central .ac-fluxo-seta {
    flex: 0 0 auto;
    margin-top: 4px;
    font-size: 12px;
    color: var(--ac-cor);
    transition: transform 0.2s ease;
}

.ajuda-central .ac-fluxo-aberto .ac-fluxo-seta {
    transform: rotate(180deg);
}

/* Trilha vertical: a linha pontilhada entre os numeros mostra que uma etapa leva a
   outra — e a diferenca entre um fluxo e uma lista de telas. Mesmo recurso do
   "Passo a passo" da ajuda de tela. */
.ajuda-central .ac-etapas {
    display: none;
    padding: 15px 16px 8px 16px;
    background: var(--ac-cor-corpo);
    border-top: solid 1px var(--ac-cor-borda);
}

.ajuda-central .ac-fluxo-aberto .ac-etapas {
    display: block;
}

.ajuda-central .ac-etapa {
    position: relative;
    display: flex;
    gap: 13px;
    padding-bottom: 14px;
}

.ajuda-central .ac-etapa:last-child {
    padding-bottom: 4px;
}

.ajuda-central .ac-etapa:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 27px;
    bottom: 3px;
    border-left: dashed 1.5px var(--ac-cor-borda);
}

.ajuda-central .ac-etapa-numero {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: var(--ac-cor);
}

.ajuda-central .ac-etapa-titulo {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cor-titulo2);
}

.ajuda-central .ac-etapa-descricao {
    font-size: 12.5px;
    color: var(--ac-cinza-texto);
    line-height: 1.5;
}

.ajuda-central .ac-etapa-caminho {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--ac-cor-texto);
    background: #fff;
    border: solid 1px var(--ac-cor-borda);
    border-radius: 6px;
    padding: 1px 8px;
}

.ajuda-central .ac-etapa-caminho i {
    font-size: 10px;
}

/* Etapa fora do alcance do perfil: continua na trilha (o fluxo precisa ser lido
   inteiro), so em cinza, com o cadeado explicando que ela e de outra pessoa. */
.ajuda-central .ac-etapa-bloqueada .ac-etapa-numero {
    background: #c3c9d1;
}

.ajuda-central .ac-etapa-bloqueada .ac-etapa-titulo {
    color: var(--ac-cinza-texto);
}

.ajuda-central .ac-etapa-cadeado {
    font-size: 10px;
    color: #b0b7c0;
    margin-left: 3px;
}


/* ─── Aba Glossario ─────────────────────────────────────────────────────────── */

.ajuda-central .ac-letras {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 14px;
}

/* Durante a busca o filtro por letra sairia do caminho da resposta. */
.ajuda-central.ac-buscando .ac-letras {
    display: none;
}

.ajuda-central .ac-letra {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 9px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ac-cor-texto);
    background: var(--ac-cor-corpo);
    border: solid 1px var(--ac-cor-borda);
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ajuda-central .ac-letra:hover {
    background: var(--ac-cor-fundo);
}

.ajuda-central .ac-letra-ativa,
.ajuda-central .ac-letra-ativa:hover {
    color: #fff;
    background: var(--ac-cor);
    border-color: var(--ac-cor);
}

/* Duas colunas: o verbete e curto, e em coluna unica a lista de 58 termos vira uma
   fita de rolagem sem fim. */
.ajuda-central .ac-termos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    align-items: start;
}

.ajuda-central .ac-termo {
    border: solid 1px var(--ac-cor-borda);
    border-left: solid 3px var(--ac-cor);
    background: var(--ac-cor-corpo);
    border-radius: 0 9px 9px 0;
    padding: 10px 13px;
}

.ajuda-central .ac-termo-nome {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ac-cor-texto);
    margin-bottom: 1px;
}

.ajuda-central .ac-termo-definicao {
    font-size: 12.5px;
    line-height: 1.55;
}

.ajuda-central .ac-termo-onde {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--ac-cor-texto);
}

.ajuda-central .ac-termo-onde i {
    margin-top: 3px;
}


/* ─── Estados vazios e rodape ───────────────────────────────────────────────── */

.ajuda-central .ac-nada-encontrado {
    display: none;
    align-items: center;
    gap: 14px;
    background: #fdfaf3;
    border: solid 1px #f0dcbe;
    border-radius: 10px;
    padding: 16px 18px;
    font-size: 13.5px;
    color: #9c6413;
}

.ajuda-central .ac-nada-encontrado i {
    font-size: 24px;
}

.ajuda-central .ac-vazio {
    font-size: 13px;
    color: var(--ac-cinza-texto);
    text-align: center;
    padding: 22px 0;
}

.ajuda-central .ac-rodape {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 18px;
    padding: 11px 15px;
    background: #f3f7fd;
    border: solid 1px #dbe6f7;
    border-radius: 9px;
    font-size: 12.5px;
    color: #2f66ad;
}

.ajuda-central .ac-rodape i {
    font-size: 17px;
}


/* ─── Telas estreitas ───────────────────────────────────────────────────────── */

@media (max-width: 760px) {

    .ajuda-central .ac-termos {
        grid-template-columns: minmax(0, 1fr);
    }

    .ajuda-central .ac-abas {
        gap: 2px;
    }

    .ajuda-central .ac-aba {
        padding: 10px 10px;
        font-size: 12.5px;
    }
}


/* ─── Icone da barra do topo ────────────────────────────────────────────────── */

/* Fica ao lado do sino e do WhatsApp: a Central precisa estar visivel de qualquer
   tela, e a barra do topo e o unico lugar que nao muda quando se navega. */
.barra-topo .ajuda-central-abrir {
    font-size: 22px;
    color: var(--cor-icones-menu);
    cursor: pointer;
    transition: color 0.15s ease;
}

.barra-topo .ajuda-central-abrir:hover {
    color: var(--cor-icone-ativo);
}