/* ===========================================
   Fazenda 360 — Ajuda (manual interativo com fotos)
   Usado pela rota 'ajuda' dentro do app e pelo ajuda.html do site.
   Cores e fontes pelos tokens de variables.css.
   =========================================== */

.pagina-ajuda {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gap-lg, 16px) 40px;
  color: var(--texto-principal, #2A2520);
  font-family: var(--fonte-principal, system-ui, sans-serif);
  font-size: var(--fs-medio, 17px);
  line-height: var(--lh-normal, 1.5);
}
.pagina-ajuda .ajuda-topo { padding: var(--gap-md, 12px) 0 0; }
.pagina-ajuda .ajuda-topo h2 {
  margin: 0;
  font-size: var(--fs-titulo, 22px);
  color: var(--verde-escuro, #3E5638);
}
.pagina-ajuda .ajuda-sub {
  margin: 2px 0 0;
  color: var(--texto-secundario, #5C5550);
  font-size: var(--fs-pequeno, 14px);
}

/* Busca presa no topo */
.pagina-ajuda .ajuda-busca {
  position: sticky; top: 0; z-index: 5;
  background: var(--bege-papel, #FAF6EB);
  padding: var(--gap-sm, 8px) 0;
}
.pagina-ajuda .ajuda-busca input {
  width: 100%; min-height: 54px;
  font-size: var(--fs-medio, 17px);
  font-family: inherit;
  border: 2px solid var(--verde-medio, #5C7F47);
  border-radius: var(--raio-md, 14px);
  padding: 0 14px 0 46px;
  background: var(--branco, #fff)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%235C7F47' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E")
    no-repeat 13px center;
  color: var(--texto-principal, #2A2520);
}
.pagina-ajuda .ajuda-busca input:focus { outline: none; border-color: var(--verde-escuro, #3E5638); }

.pagina-ajuda h3.ajuda-secao {
  font-size: var(--fs-subtitulo, 18px);
  color: var(--verde-escuro, #3E5638);
  margin: var(--gap-md, 12px) 0 var(--gap-sm, 8px);
}

/* Dúvidas mais comuns */
.pagina-ajuda .ajuda-duvidas { display: flex; flex-direction: column; gap: 6px; }
.pagina-ajuda .ajuda-duvida {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  background: var(--branco, #fff);
  border: 1px solid var(--linha-media, rgba(62,86,56,.16));
  border-radius: var(--raio-sm, 8px);
  padding: 11px 12px;
  min-height: var(--toque-minimo, 48px);
  color: var(--verde-escuro, #3E5638);
  font-weight: var(--peso-bold, 700);
  font-size: var(--fs-base, 16px);
  font-family: inherit;
  cursor: pointer;
}
.pagina-ajuda .ajuda-duvida-seta { color: var(--dourado, #C9A961); font-size: 22px; line-height: 1; }

/* Grupos e assuntos */
.pagina-ajuda .ajuda-grupo h3 {
  display: flex; align-items: center; gap: 8px;
  margin: var(--gap-xl, 24px) 0 var(--gap-sm, 8px);
  color: var(--verde-escuro, #3E5638);
  font-size: var(--fs-subtitulo, 18px);
}
.pagina-ajuda .ajuda-grupo-ico { font-size: 22px; }
.pagina-ajuda details.ajuda-topico {
  background: var(--branco, #fff);
  border: 1px solid var(--linha-media, rgba(62,86,56,.16));
  border-radius: var(--raio-md, 14px);
  margin-bottom: var(--gap-sm, 8px);
  scroll-margin-top: 84px;
  box-shadow: var(--sombra-sutil, none);
}
.pagina-ajuda details.ajuda-topico > summary {
  list-style: none; cursor: pointer;
  padding: 14px; min-height: 56px;
  display: flex; gap: 10px; align-items: center;
  font-weight: var(--peso-bold, 700);
  font-size: var(--fs-medio, 17px);
  color: var(--texto-principal, #2A2520);
}
.pagina-ajuda details.ajuda-topico > summary::-webkit-details-marker { display: none; }
.pagina-ajuda details.ajuda-topico > summary::after {
  content: "+"; margin-left: auto; font-size: 26px; font-weight: 400;
  color: var(--verde-medio, #5C7F47);
}
.pagina-ajuda details.ajuda-topico[open] > summary::after { content: "–"; }
.pagina-ajuda details.ajuda-topico.destaque { border: 3px solid var(--dourado, #C9A961); }

.pagina-ajuda .ajuda-corpo { padding: 0 16px 16px; }
.pagina-ajuda .ajuda-para {
  color: var(--texto-claro, #8B847E);
  font-size: var(--fs-pequeno, 14px);
  margin: -4px 0 8px;
}
.pagina-ajuda .ajuda-corpo ol { padding-left: 22px; margin: 6px 0 10px; }
.pagina-ajuda .ajuda-corpo li { margin: 6px 0; }
.pagina-ajuda .ajuda-corpo b { color: var(--verde-escuro, #3E5638); }
.pagina-ajuda .ajuda-dica {
  background: var(--dourado-suave, #F5EDD8);
  border-radius: var(--raio-sm, 8px);
  padding: 10px 12px;
  font-size: var(--fs-pequeno, 14px);
  margin: 10px 0;
}
.pagina-ajuda .ajuda-foto {
  display: block; width: 100%; max-width: 300px;
  margin: 10px auto;
  border-radius: 18px; border: 6px solid #2A2520;
  box-shadow: var(--sombra-media, 0 4px 12px rgba(0,0,0,.18));
  cursor: zoom-in; background: var(--bege-suave, #eee);
}
.pagina-ajuda .ajuda-abrir-tela {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 6px 0;
  padding: 10px 14px; min-height: var(--toque-minimo, 48px);
  border-radius: var(--raio-sm, 8px);
  border: 2px solid var(--verde-medio, #5C7F47);
  background: transparent;
  color: var(--verde-escuro, #3E5638);
  font-weight: var(--peso-bold, 700);
  font-size: var(--fs-base, 16px);
  font-family: inherit;
  cursor: pointer;
}
.pagina-ajuda .ajuda-veja { font-size: var(--fs-pequeno, 14px); margin: 8px 0 0; }
.pagina-ajuda .ajuda-link {
  background: none; border: none; padding: 0;
  display: inline; text-align: left;
  color: var(--verde-medio, #5C7F47);
  font-weight: var(--peso-bold, 700);
  font-size: inherit; font-family: inherit;
  text-decoration: underline; cursor: pointer;
}
.pagina-ajuda .ajuda-nada {
  text-align: center;
  color: var(--texto-secundario, #5C5550);
  padding: 24px 0;
}

/* Cartão do suporte */
.pagina-ajuda .ajuda-cartao {
  background: var(--branco, #fff);
  border: 1px solid var(--linha-media, rgba(62,86,56,.16));
  border-radius: var(--raio-md, 14px);
  padding: 16px; margin-top: 18px; text-align: center;
}
.pagina-ajuda .ajuda-cartao-titulo { font-weight: var(--peso-bold, 700); font-size: var(--fs-subtitulo, 18px); }
.pagina-ajuda .ajuda-cartao-texto { color: var(--texto-secundario, #5C5550); margin: 6px 0 12px; }
.pagina-ajuda .ajuda-botao-whats {
  display: inline-flex; align-items: center; gap: 8px;
  background: #25D366; color: #fff;
  font-weight: var(--peso-bold, 700);
  padding: 12px 18px; min-height: var(--toque-minimo, 48px);
  border-radius: var(--raio-sm, 8px);
  text-decoration: none;
}

/* Foto ampliada */
.pagina-ajuda .ajuda-zoom {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,.88);
  display: none; align-items: center; justify-content: center;
  padding: 12px;
}
.pagina-ajuda .ajuda-zoom img { max-width: 100%; max-height: 100%; border-radius: 16px; }
.pagina-ajuda .ajuda-zoom.aberto { display: flex; }

/* Página solta (site): cabeçalho próprio */
.ajuda-site-topo {
  background: linear-gradient(135deg, var(--verde-medio, #5C7F47) 0%, var(--verde-escuro, #3E5638) 100%);
  color: #fff;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 14px;
  display: flex; align-items: center; gap: 10px;
}
.ajuda-site-topo img { width: 40px; height: 40px; border-radius: 10px; background: #fff; }
.ajuda-site-topo h1 { margin: 0; font-size: 21px; font-family: var(--fonte-principal, system-ui, sans-serif); }
.ajuda-site-topo .sub { font-size: 13px; opacity: .85; }
body.ajuda-site { margin: 0; background: var(--bege-papel, #FAF6EB); }
body.ajuda-site .pagina-ajuda .ajuda-topo { display: none; }

/* Computador: largura confortável */
@media (min-width: 900px) {
  .pagina-ajuda { padding-left: var(--gap-xl, 24px); padding-right: var(--gap-xl, 24px); }
  .pagina-ajuda .ajuda-foto { max-width: 340px; }
}

/* Tema escuro do app: as fotos continuam claras (são prints da tela) */
body.tema-escuro .pagina-ajuda .ajuda-foto { border-color: #000; }
body.tema-escuro .pagina-ajuda .ajuda-corpo b { color: var(--dourado-claro, #E0C896); }