/* ************************************************************************************************** */
/* AJUDA CONTEXTUAL                                                                                   */
/* Ícone "?" no subtítulo, corpo do modal e bloco de ajuda da listagem vazia.                          */
/*                                                                                                    */
/* O visual segue a ideia de "cheat sheet": cada assunto é um cartão fechado, com faixa de título      */
/* colorida e ícone em selo, para o cliente localizar o que procura antes de ler. As cores saem da     */
/* paleta do sistema (azul --cor-icone-ativo, roxo --cor-logo-menu) mais um verde e um âmbar na        */
/* mesma temperatura, para separar pré-requisito, passo, atenção e próximo passo pela cor.             */
/* ************************************************************************************************** */

/* ─── Ícone "?" ao lado do subtítulo de cada tela ───────────────────────────── */

/* .subtitulo i vale 30px (ícone do módulo). A classe vence por especificidade,
   e o CSS de packets carrega depois do de main — ver php/funcoes/includes_css.php.
   Continua sendo um <i> filho direto de .subtitulo: main/js/titulo_modal.js
   identifica o ícone do módulo excluindo justamente esta classe. */
.subtitulo .ajuda-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: 14px;
    color: var(--cor-icone-ativo);
    background: #eef4fd;
    border: solid 1px #dbe6f7;
    border-radius: 50%;
    margin-left: 12px;
    margin-bottom: 5px;
    padding-bottom: 0;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.subtitulo .ajuda-icone:hover {
    background: var(--cor-icone-ativo);
    border-color: var(--cor-icone-ativo);
    color: #fff;
}

/* O caminho pequeno no título do modal ("/ Submenu / Como usar") nasceu aqui e virou
   padrão de todos os modais — mora em packets/modal/css/index.css e modal2/css. */

/* ─── Corpo do modal ────────────────────────────────────────────────────────── */

.conteiner_ajuda {
    /* Paleta local: um par (cor forte / fundo fraco) por tipo de bloco. */
    /* -fundo = faixa do título; -corpo = miolo do cartão (mais claro que a faixa). */
    --ajuda-azul: #4180d6;
    --ajuda-azul-texto: #2f66ad;
    --ajuda-azul-fundo: #e3edfb;
    --ajuda-azul-corpo: #f4f8fe;
    --ajuda-azul-borda: #d3e2f7;

    --ajuda-verde: #2f8f6b;
    --ajuda-verde-texto: #24705a;
    --ajuda-verde-fundo: #e4f2ec;
    --ajuda-verde-corpo: #f4faf7;
    --ajuda-verde-borda: #d2e9df;

    --ajuda-ambar: #d69a3a;
    --ajuda-ambar-texto: #9c6413;
    --ajuda-ambar-fundo: #fbeed6;
    --ajuda-ambar-corpo: #fdf8ee;
    --ajuda-ambar-borda: #f0dcbe;

    --ajuda-roxo: #895fc5;
    --ajuda-roxo-texto: #6b47a4;
    --ajuda-roxo-fundo: #ece2f9;
    --ajuda-roxo-corpo: #f7f3fd;
    --ajuda-roxo-borda: #e0d2f4;

    color: var(--cor-texto-padrao);
    font-size: 14px;
    line-height: 1.65;
    padding-right: 5px;
}

/* ─── Capa: para que serve a tela ───────────────────────────────────────────── */

.conteiner_ajuda .ajuda-capa {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: linear-gradient(135deg, #eef4fd 0%, #f5f1fc 100%);
    border: solid 1px #dbe6f7;
    border-radius: 10px;
    padding: 15px 18px;
    margin-bottom: 15px;
}

.conteiner_ajuda .ajuda-capa-icone {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--ajuda-azul) 0%, #6a7fd6 100%);
    color: #fff;
    font-size: 17px;
    box-shadow: 0 2px 5px rgba(65, 128, 214, 0.25);
}

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

.conteiner_ajuda .ajuda-resumo {
    font-size: 14.5px;
    color: var(--cor-titulo2);
    line-height: 1.6;
}

/* ─── Cartões (um por assunto) ──────────────────────────────────────────────── */

/* Cada cartão é uma cor: o miolo também é tingido (não só a faixa do título), para o
   olho separar os assuntos antes de ler, como numa folha de consulta. */
.conteiner_ajuda .ajuda-bloco {
    background: #fff;
    border: solid 1px var(--borda-cor-padrao);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}

.conteiner_ajuda .ajuda-bloco-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 600;
    border-bottom: solid 1px var(--borda-cor-padrao);
}

/* Ícone do título vira selo quadrado colorido (a cor entra por bloco, abaixo). */
.conteiner_ajuda .ajuda-bloco-titulo i {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 12px;
    color: #fff;
}

.conteiner_ajuda .ajuda-lista {
    margin: 0;
    padding: 12px 18px 4px 18px;
    list-style: none;
}

.conteiner_ajuda .ajuda-lista li {
    position: relative;
    padding-left: 27px;
    margin-bottom: 8px;
}

/* Marcador em ícone (listas não ordenadas). O glifo entra por bloco, abaixo. */
.conteiner_ajuda ul.ajuda-lista li::before {
    position: absolute;
    left: 0;
    top: 1px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    line-height: 1.5;
}

/* ─── Passo a passo: trilha numerada ────────────────────────────────────────── */

.conteiner_ajuda ol.ajuda-lista {
    counter-reset: passo;
    padding-left: 20px;
}

.conteiner_ajuda ol.ajuda-lista li {
    counter-increment: passo;
    padding-left: 36px;
    padding-bottom: 11px;
    margin-bottom: 0;
}

.conteiner_ajuda ol.ajuda-lista li:last-child {
    padding-bottom: 2px;
}

.conteiner_ajuda ol.ajuda-lista li::before {
    content: counter(passo);
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: var(--ajuda-azul-fundo);
    border: solid 1px var(--ajuda-azul-borda);
    color: var(--ajuda-azul-texto);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* Linha pontilhada ligando um passo ao seguinte: mostra que a ordem importa. */
.conteiner_ajuda ol.ajuda-lista li::after {
    content: "";
    position: absolute;
    left: 11px;
    top: 26px;
    bottom: 1px;
    width: 1px;
    background: repeating-linear-gradient(to bottom, var(--ajuda-azul-borda) 0 3px, transparent 3px 6px);
}

.conteiner_ajuda ol.ajuda-lista li:last-child::after {
    display: none;
}

/* ─── Cores por bloco ───────────────────────────────────────────────────────── */

/* O que é preciso ter antes de usar */
.conteiner_ajuda .ajuda-bloco-requisitos {
    background: var(--ajuda-verde-corpo);
    border-color: var(--ajuda-verde-borda);
}

.conteiner_ajuda .ajuda-bloco-requisitos .ajuda-bloco-titulo {
    background: var(--ajuda-verde-fundo);
    border-bottom-color: var(--ajuda-verde-borda);
    color: var(--ajuda-verde-texto);
}

.conteiner_ajuda .ajuda-bloco-requisitos .ajuda-bloco-titulo i {
    background: var(--ajuda-verde);
}

.conteiner_ajuda .ajuda-bloco-requisitos ul.ajuda-lista li::before {
    content: "\f058";
    color: var(--ajuda-verde);
}

/* Passo a passo */
.conteiner_ajuda .ajuda-bloco-passos {
    background: var(--ajuda-azul-corpo);
    border-color: var(--ajuda-azul-borda);
}

.conteiner_ajuda .ajuda-bloco-passos .ajuda-bloco-titulo {
    background: var(--ajuda-azul-fundo);
    border-bottom-color: var(--ajuda-azul-borda);
    color: var(--ajuda-azul-texto);
}

.conteiner_ajuda .ajuda-bloco-passos .ajuda-bloco-titulo i {
    background: var(--ajuda-azul);
}

/* Pontos de atenção: o bloco que o cliente lê quando algo travou. */
.conteiner_ajuda .ajuda-bloco-atencao {
    background: var(--ajuda-ambar-corpo);
    border-color: var(--ajuda-ambar-borda);
}

.conteiner_ajuda .ajuda-bloco-atencao .ajuda-bloco-titulo {
    background: var(--ajuda-ambar-fundo);
    border-bottom-color: var(--ajuda-ambar-borda);
    color: var(--ajuda-ambar-texto);
}

.conteiner_ajuda .ajuda-bloco-atencao .ajuda-bloco-titulo i {
    background: var(--ajuda-ambar);
}

.conteiner_ajuda .ajuda-bloco-atencao ul.ajuda-lista li::before {
    content: "\f071";
    color: var(--ajuda-ambar);
    font-size: 12px;
}

/* ─── Próximo passo ─────────────────────────────────────────────────────────── */

.conteiner_ajuda .ajuda-bloco-proximo {
    background: var(--ajuda-roxo-corpo);
    border-color: var(--ajuda-roxo-borda);
}

.conteiner_ajuda .ajuda-bloco-proximo .ajuda-bloco-titulo {
    background: var(--ajuda-roxo-fundo);
    border-bottom-color: var(--ajuda-roxo-borda);
    color: var(--ajuda-roxo-texto);
}

.conteiner_ajuda .ajuda-bloco-proximo .ajuda-bloco-titulo i {
    background: var(--ajuda-roxo);
}

.conteiner_ajuda .ajuda-proximo-texto {
    padding: 13px 18px 15px 18px;
}

/* ─── Rodapé: ensina que o "?" existe em toda tela ──────────────────────────── */

.conteiner_ajuda .ajuda-rodape {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: dashed 1px var(--borda-cor-padrao);
    font-size: 12.5px;
    color: var(--cor-titulo3);
}

.conteiner_ajuda .ajuda-rodape i {
    color: var(--cor-icone-ativo);
    font-size: 13px;
    margin-top: 3px;
}

.conteiner_ajuda .ajuda-vazia {
    color: var(--cor-titulo3);
    font-style: italic;
}

/* ─── Ajuda dentro da listagem vazia ────────────────────────────────────────── */

/* Quando a tela tem ajuda, quem explica é o cartão; o "Nenhum registro encontrado."
   vira legenda. Sem ajuda publicada, a mensagem continua com o peso de sempre. */
.nenhum_registro:has(+ .nenhum_registro_ajuda) {
    font-size: 13px;
    color: var(--cor-titulo3);
}

.nenhum_registro_ajuda {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    max-width: 700px;
    margin-top: 16px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #eef4fd 0%, #f5f1fc 100%);
    border: solid 1px #dbe6f7;
    border-radius: 10px;
    color: var(--cor-texto-padrao);
    font-size: 14px;
    line-height: 1.6;
}

.nenhum_registro_ajuda_icone {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--cor-icone-ativo) 0%, #6a7fd6 100%);
    color: #fff;
    font-size: 15px;
    box-shadow: 0 2px 5px rgba(65, 128, 214, 0.25);
}

.nenhum_registro_ajuda_rotulo {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #2f66ad;
    margin-bottom: 3px;
}

.nenhum_registro_ajuda_texto {
    color: var(--cor-titulo2);
}

.nenhum_registro_ajuda_link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    padding: 6px 13px;
    background: #fff;
    border: solid 1px var(--cor-icone-ativo);
    border-radius: 20px;
    color: var(--cor-icone-ativo);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nenhum_registro_ajuda_link:hover {
    background: var(--cor-icone-ativo);
    color: #fff;
    text-decoration: none;
}