/* ==========================================================
   CAÇA LEILÕES — CENTRAL DE AJUDA
   ajuda.css
========================================================== */

.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.ajuda-hero{
    background:linear-gradient(135deg,#fff4ea,var(--cor-fundo));
    padding:56px 0 40px;
    text-align:center;
}

.ajuda-hero h1{
    font-size:2.1rem;
    font-weight:700;
    margin-bottom:10px;
    color:var(--cor-texto);
}

.ajuda-hero p{
    color:var(--cor-texto-claro);
    max-width:620px;
    margin:0 auto 26px;
}

.ajuda-busca{
    max-width:560px;
    margin:0 auto;
    position:relative;
}

.ajuda-busca input{
    width:100%;
    padding:16px 20px 16px 50px;
    border-radius:999px;
    border:1px solid var(--cor-borda);
    background:var(--cor-branca);
    box-shadow:var(--sombra);
    font-size:1rem;
    font-family:inherit;
    color:var(--cor-texto);
}

.ajuda-busca input:focus{
    outline:3px solid #ffd7b3;
    outline-offset:1px;
}

.ajuda-busca i.fa-magnifying-glass{
    position:absolute;
    left:20px;
    top:50%;
    transform:translateY(-50%);
    color:var(--cor-texto-claro);
}

.ajuda-busca-sugestoes{
    margin-top:14px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:center;
}

.ajuda-busca-sugestoes button{
    border:1px solid var(--cor-borda);
    background:var(--cor-branca);
    color:var(--cor-texto-claro);
    border-radius:999px;
    padding:6px 14px;
    font-size:.85rem;
    cursor:pointer;
    font-family:inherit;
    transition:var(--transicao);
}

.ajuda-busca-sugestoes button:hover,
.ajuda-busca-sugestoes button:focus-visible{
    border-color:var(--cor-principal);
    color:var(--cor-principal);
}

/* ===== CATEGORIAS (grade de cards) ===== */

.ajuda-categorias{
    padding:44px 0;
}

.ajuda-categorias h2,
.ajuda-secao-titulo{
    font-size:1.5rem;
    margin-bottom:22px;
    color:var(--cor-texto);
}

.ajuda-categorias-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:28px;
}

.ajuda-categoria-card{
    display:block;
    background:var(--cor-branca);
    border:1px solid var(--cor-borda);
    border-radius:var(--radius);
    padding:24px;
    text-decoration:none;
    color:inherit;
    box-shadow:var(--sombra);
    transition:var(--transicao);
}

.ajuda-categoria-card:hover,
.ajuda-categoria-card:focus-visible{
    box-shadow:0 14px 34px rgba(0,0,0,.12);
    border-color:var(--cor-principal);
    transform:translateY(-2px);
}

.ajuda-categoria-card i{
    font-size:1.6rem;
    color:var(--cor-principal);
    margin-bottom:12px;
    display:block;
}

.ajuda-categoria-card h3{
    font-size:1.05rem;
    margin-bottom:6px;
    color:var(--cor-texto);
}

.ajuda-categoria-card span{
    font-size:.85rem;
    color:var(--cor-texto-claro);
}

/* ===== LISTA DE ARTIGOS POR CATEGORIA ===== */

.ajuda-categoria-secao{
    padding:32px 0;
    border-top:1px solid var(--cor-borda);
}

.ajuda-categoria-secao-header{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
}

.ajuda-categoria-secao-header i{
    color:var(--cor-principal);
    font-size:1.3rem;
}

.ajuda-artigos-lista{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:24px;
    align-items:start;
}

.ajuda-artigo-card{
    display:block;
    background:var(--cor-branca);
    border:1px solid var(--cor-borda);
    border-radius:14px;
    padding:16px 18px;
    text-decoration:none;
    color:inherit;
    box-shadow:var(--sombra);
    transition:var(--transicao);
}

.ajuda-artigo-card:hover,
.ajuda-artigo-card:focus-visible{
    border-color:var(--cor-principal);
    background:#fff8f2;
    box-shadow:0 14px 34px rgba(0,0,0,.12);
    transform:translateY(-2px);
}

.ajuda-artigo-card h4{
    font-size:.98rem;
    color:var(--cor-texto);
    margin-bottom:4px;
}

.ajuda-artigo-card p{
    font-size:.85rem;
    color:var(--cor-texto-claro);
}

/* ===== ARTIGO ABERTO (view detalhada) ===== */

.ajuda-artigo{
    display:none;
    padding:36px 0 60px;
}

.ajuda-artigo.ajuda-artigo--ativo{
    display:block;
}

.ajuda-breadcrumb{
    font-size:.85rem;
    color:var(--cor-texto-claro);
    margin-bottom:14px;
}

.ajuda-breadcrumb a{
    color:var(--cor-texto-claro);
    text-decoration:none;
}

.ajuda-breadcrumb a:hover{
    color:var(--cor-principal);
}

.ajuda-artigo-corpo{
    max-width:760px;
}

.ajuda-artigo-corpo h1{
    font-size:1.7rem;
    margin-bottom:10px;
    color:var(--cor-texto);
}

.ajuda-resumo{
    color:var(--cor-texto-claro);
    margin-bottom:22px;
    font-size:1.02rem;
}

.ajuda-artigo-corpo h2{
    font-size:1.15rem;
    margin:28px 0 12px;
    color:var(--cor-texto);
}

.ajuda-aprendizado{
    background:var(--cor-branca);
    border:1px solid var(--cor-borda);
    border-radius:14px;
    padding:16px 20px;
    margin-bottom:8px;
}

.ajuda-aprendizado li{
    margin-left:18px;
    margin-bottom:4px;
}

.ajuda-passos{
    counter-reset:ajuda-passo;
    list-style:none;
    padding:0;
}

.ajuda-passos > li{
    counter-increment:ajuda-passo;
    position:relative;
    padding:0 0 26px 46px;
    margin-bottom:6px;
    border-left:2px solid var(--cor-borda);
}

.ajuda-passos > li:last-child{
    border-left-color:transparent;
    padding-bottom:0;
}

.ajuda-passos > li::before{
    content:counter(ajuda-passo);
    position:absolute;
    left:-19px;
    top:0;
    width:36px;
    height:36px;
    border-radius:50%;
    background:var(--cor-principal);
    color:#fff;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.95rem;
}

.ajuda-passos p{
    margin-bottom:10px;
}

.ajuda-passos strong.ajuda-elemento{
    color:var(--cor-principal);
}

/* ===== PRINTS (screenshots) ===== */

figure.ajuda-print{
    margin:0 0 4px;
    border:1px solid var(--cor-borda);
    border-radius:12px;
    overflow:hidden;
    background:var(--cor-branca);
}

figure.ajuda-print img{
    display:block;
    width:100%;
    height:auto;
}

figure.ajuda-print figcaption{
    font-size:.8rem;
    color:var(--cor-texto-claro);
    padding:8px 12px;
    border-top:1px solid var(--cor-borda);
}

figure.ajuda-print--pendente{
    border-style:dashed;
    background:#fafafa;
}

figure.ajuda-print--pendente img{
    display:none;
}

figure.ajuda-print--pendente::before{
    content:"🖼️  Print pendente de captura — " attr(data-arquivo);
    display:block;
    padding:22px 16px;
    text-align:center;
    color:var(--cor-texto-claro);
    font-size:.82rem;
    font-style:italic;
}

/* ===== CAIXAS (dica / importante) ===== */

.ajuda-caixa{
    border-radius:12px;
    padding:14px 18px;
    margin:18px 0;
    font-size:.95rem;
}

.ajuda-dica{
    background:#eef9f0;
    border:1px solid #bfe8c6;
}

.ajuda-importante{
    background:#fff4e5;
    border:1px solid #ffd9a0;
}

/* ===== RELACIONADOS / VOLTAR ===== */

.ajuda-relacionados{
    list-style:none;
    padding:0;
}

.ajuda-relacionados li{
    margin-bottom:6px;
}

.ajuda-relacionados a{
    color:var(--cor-principal);
    text-decoration:none;
    font-weight:500;
}

.ajuda-relacionados a:hover{
    text-decoration:underline;
}

.ajuda-voltar{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-bottom:18px;
    color:var(--cor-texto-claro);
    text-decoration:none;
    font-size:.9rem;
}

.ajuda-voltar:hover{
    color:var(--cor-principal);
}

/* ===== SEM RESULTADO ===== */

#ajudaSemResultado{
    display:none;
    text-align:center;
    padding:60px 20px;
    color:var(--cor-texto-claro);
}

#ajudaSemResultado i{
    font-size:2rem;
    margin-bottom:12px;
    display:block;
    color:var(--cor-borda);
}

/* ===== CARREGAMENTO / ERRO (dados vindos da API) ===== */

.ajuda-estado{
    text-align:center;
    padding:60px 20px;
    color:var(--cor-texto-claro);
}

.ajuda-estado i{
    font-size:2rem;
    margin-bottom:12px;
    display:block;
    color:var(--cor-borda);
}

#ajudaErro i{
    color:var(--cor-principal);
}

#ajudaTentarNovamente{
    margin-top:14px;
}

/* ===== FEEDBACK DO ARTIGO ("Esta resposta ajudou?") ===== */

.ajuda-feedback{
    margin-top:32px;
    padding-top:20px;
    border-top:1px solid var(--cor-borda);
    text-align:center;
}

.ajuda-feedback-pergunta{
    margin:0 0 12px;
    font-size:.92rem;
    color:var(--cor-texto-claro);
}

.ajuda-feedback-botoes{
    display:flex;
    justify-content:center;
    gap:10px;
}

.ajuda-feedback-botao{
    border:1px solid var(--cor-borda);
    background:var(--cor-branca);
    color:var(--cor-texto);
    border-radius:999px;
    padding:8px 18px;
    font-size:.9rem;
    font-family:inherit;
    cursor:pointer;
    transition:var(--transicao);
}

.ajuda-feedback-botao:hover:not(:disabled){
    border-color:var(--cor-principal);
    color:var(--cor-principal);
}

.ajuda-feedback-botao:disabled{
    opacity:.6;
    cursor:default;
}

.ajuda-feedback-botao--ativo{
    border-color:var(--cor-principal);
    background:#fff4ea;
    color:var(--cor-principal);
    font-weight:600;
}

.ajuda-feedback-confirmacao{
    margin:12px 0 0;
    font-size:.85rem;
    color:var(--cor-texto-claro);
}

.ajuda-feedback-erro{
    margin:12px 0 0;
    font-size:.85rem;
    color:#b91c1c;
}

/* ===== ESTADO OCULTO POR BUSCA/FILTRO ===== */

[data-ajuda-oculto="true"]{
    display:none !important;
}

/* ===== RESPONSIVO ===== */

@media (max-width:720px){
    .ajuda-hero{ padding:40px 0 28px; }
    .ajuda-hero h1{ font-size:1.5rem; }
    .ajuda-categorias-grid{ grid-template-columns:1fr 1fr; }
    .ajuda-artigos-lista{ grid-template-columns:1fr; }
}

@media (max-width:480px){
    .ajuda-categorias-grid{ grid-template-columns:1fr; }
}