/*  ══════════════════════════════════════════════════════════════════════════
    simulador-3d/ajuda/ajuda.css — A PELE DA AJUDA. (15/09/2026, fase 1)

    Tudo aqui tem o prefixo `aj-`, e nada fala de `#app`, `.grupo` ou `.bt`:
    a ajuda mora por cima de oito telas diferentes, e uma regra genérica
    daqui mudaria um botão do simulador sem ninguém perceber. Os botões da
    ajuda escrevem fonte, cor, borda e fundo por inteiro — o CSS do site
    estiliza `button` e não pode vazar para dentro.

    ─── AS CAMADAS, NUM LUGAR SÓ ───

    Os números estão nas variáveis abaixo, e só nelas. O que já existe na
    tela, medido em 14/09/2026 (ver o relatório técnico):

        palco e seus controles ........ até 30
        card sendo arrastado .......... 60–80  (fixed)
        seletor de cor da casa ........ 70     (fixed)
        menu do site no celular ....... 900    · cabeçalho do site 999
        janela do lote ................ 1200
        balão de dica (hover) ......... 9985   · aviso das preferências 9990
        modais do site ................ 10000

    · O BOTÃO fica em 58: acima do palco, abaixo do seletor de cor, dos
      cards arrastados, da gaveta de arquivos (60) e de todo modal — ele
      não pode aparecer por cima de uma janela que a pessoa abriu.
    · O TUTORIAL fica em 9991: acima do aviso das preferências e abaixo dos
      modais do site. O balão de hover (9985) é calado enquanto ele roda.
    · A CENTRAL não tem número: é `<dialog>` com `showModal()`, e mora na
      top layer do navegador, acima de qualquer z-index.

    ─── A POSIÇÃO DO BOTÃO É DAQUI, E NÃO DO JS ───

    Canto de baixo à direita da JANELA, fora do palco — o olho do palco mora
    no canto de baixo à direita DO PALCO, e o do celular idem. O aviso das
    preferências também nasce nesse canto: enquanto ele está à vista, o
    botão sobe (`:has()`), em vez de os dois se cobrirem. Na produção, se
    algo mais morar ali (chat, carrinho), é só mudar as três variáveis.
    No celular ele recolhe para a beira, numa aba — ver o bloco de 760 px
    (fase 5).
    ══════════════════════════════════════════════════════════════════════════ */

:root {
  --aj-z-botao: 58;
  --aj-z-camada: 9991;

  --aj-botao-tam: 52px;
  --aj-botao-direita: 20px;
  --aj-botao-baixo: 20px;
  --aj-botao-desvio: 84px;          /* quanto sobe quando o aviso aparece */

  --aj-verde: var(--cw-verde, #e2507d);
  --aj-verde-escuro: #be2d59;
  --aj-verde-claro: #ffe8ef;
  --aj-tinta: #0f172a;
  --aj-fraca: #475569;
  --aj-linha: #e2e8f0;
  --aj-fundo: #ffffff;
  --aj-fundo-2: #f8fafc;
  --aj-veu: rgba(15, 23, 42, .56);
  --aj-raio: 14px;
  --aj-letra: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ═══════════════════════════════ O BOTÃO ═══════════════════════════════ */

.aj-botao {
  position: fixed;
  right: var(--aj-botao-direita);
  bottom: var(--aj-botao-baixo);
  z-index: var(--aj-z-botao);
  width: var(--aj-botao-tam);
  height: var(--aj-botao-tam);
  margin: 0;
  padding: 0;
  border: 2px solid var(--aj-verde);
  border-radius: 50%;
  background: #fff;
  color: var(--aj-verde);
  font: 700 16px/1 var(--aj-letra);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .20), 0 1px 3px rgba(15, 23, 42, .14);
  transition: transform .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
  /*  O ícone do sprite anima só onde a página manda (`--ic-anim`, ver
      `icones.php`): aqui, no hover e no foco.                              */
  --ic-anim: paused;
}
.aj-botao:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15, 23, 42, .24), 0 2px 5px rgba(15, 23, 42, .14); --ic-anim: running; }
.aj-botao:focus-visible { outline: 3px solid #f0759b; outline-offset: 3px; --ic-anim: running; }
.aj-botao[aria-expanded="true"] { background: var(--aj-verde-claro); }
.aj-botao__ic { width: 30px; height: 30px; display: block; }
.aj-botao__q { font-size: 24px; }
.aj-botao__dica {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translate(4px, -50%);
  white-space: nowrap;
  background: var(--aj-tinta);
  color: #fff;
  font: 600 12.5px/1.2 var(--aj-letra);
  padding: 7px 10px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.aj-botao:hover .aj-botao__dica,
.aj-botao:focus-visible .aj-botao__dica { opacity: 1; transform: translate(0, -50%); }

/*  O aviso das preferências nasce no mesmo canto: o botão sobe e volta.   */
body:has(.s3-toast.is-vendo) .aj-botao { transform: translateY(calc(-1 * var(--aj-botao-desvio))); }

/*  ═══ NO CELULAR, UMA ABA NA BEIRA, E NÃO UM CÍRCULO SOLTO (fase 5) ═══

    Medido a 390 px em sete telas (`fase5/botao_celular_sonda.mjs`): o
    conteúdo vai até 4–8 px da beira direita, e o site não tem barra fixa em
    cima nem embaixo — não há faixa livre onde um botão flutuante more sem
    cobrir nada. O círculo de 46 px, a 14 px da beira, ficava por cima de um
    controle em 48 de 84 posições (o título dos cards, a pílula "Manga E", a
    barra "Lado", a "Luz ambiente", o "Salvar como meu padrão").

    Então ele RECOLHE PARA A BEIRA: uma aba de meia pílula colada no canto,
    da largura de um dedo (o alvo de toque mínimo do WCAG é 24 px), que cobre
    só a última fatia da direita — onde os cards têm borda e margem, e não
    controle. Continua no mesmo canto, com o mesmo desenho, sempre à mão, e
    sobe quando o aviso das preferências aparece, como antes. Nenhum
    JavaScript sabe onde ele está: tudo nas variáveis abaixo.

    SAFE-AREA: com o aparelho deitado, a beira direita pode ter o recorte da
    câmera; embaixo, a barra de gestos. `env()` vale 0 onde não há — e só
    passa a valer se o `<meta viewport>` do site ganhar `viewport-fit=cover`
    (hoje não tem); a regra já fica pronta para esse dia.

    Até 760 px, a mesma largura em que a Central vira tela cheia: abaixo
    dela o conteúdo ocupa a janela de beira a beira.                       */
@media (max-width: 760px) {
  :root {
    --aj-botao-direita: 0px;
    --aj-botao-baixo: 18px;
    --aj-botao-aba-larg: 28px;
    --aj-botao-aba-alt: 44px;
    --aj-botao-desvio: 76px;
  }
  .aj-botao {
    right: calc(var(--aj-botao-direita) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--aj-botao-baixo) + env(safe-area-inset-bottom, 0px));
    width: var(--aj-botao-aba-larg);
    height: var(--aj-botao-aba-alt);
    padding-left: 2px;
    border-right: 0;
    border-radius: 14px 0 0 14px;
    box-shadow: -4px 4px 14px rgba(15, 23, 42, .18), 0 1px 3px rgba(15, 23, 42, .12);
  }
  /*  No toque o `:hover` gruda depois do dedo sair: a aba não pula.       */
  .aj-botao:hover { transform: none; }
  /*  O contorno do foco por DENTRO: colada na beira, a metade de fora dele
      cairia fora da janela.                                               */
  .aj-botao:focus-visible { outline-offset: -4px; }
  .aj-botao__ic { width: 20px; height: 20px; }
  .aj-botao__q { font-size: 17px; }
  .aj-botao__dica { display: none; }
}

/*  Com o tutorial aberto os balões de hover do `balao_dica.js` ficam
    calados — dois balões ao mesmo tempo apontando coisas diferentes é o
    contrário de ajuda. A classe sai do `<html>` ao fechar.               */
.aj-ativo .mk-dica { display: none !important; }

/* ═══════════════════════ PEÇAS COMUNS: BOTÕES E LINKS ═══════════════════════ */

.aj-bt {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  margin: 0;
  padding: 7px 14px;
  border: 1.5px solid var(--aj-linha);
  border-radius: 10px;
  background: #fff;
  color: var(--aj-tinta);
  font: 600 13.5px/1.2 var(--aj-letra);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.aj-bt:hover { border-color: #cbd5e1; background: var(--aj-fundo-2); }
.aj-bt:disabled { opacity: .45; cursor: default; }
.aj-bt--cheio { background: var(--aj-verde); border-color: var(--aj-verde); color: #fff; }
.aj-bt--cheio:hover { background: var(--aj-verde-escuro); border-color: var(--aj-verde-escuro); }
.aj-bt--leve { border-color: transparent; background: transparent; color: var(--aj-fraca); }
.aj-bt--leve:hover { background: #f1f5f9; border-color: transparent; }
.aj-bt:focus-visible,
.aj-link:focus-visible,
.aj-item:focus-visible,
.aj-resultado:focus-visible,
.aj-central__x:focus-visible,
.aj-central__menu:focus-visible,
.aj-balao__x:focus-visible { outline: 3px solid #f0759b; outline-offset: 2px; }

.aj-link {
  appearance: none;
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--aj-verde-escuro);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.aj-cresce { flex: 1 1 auto; }

/* ═══════════════════════════════ A CENTRAL ═══════════════════════════════ */

.aj-central {
  width: min(92vw, 1180px);
  height: min(88vh, 860px);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--aj-raio);
  background: var(--aj-fundo);
  color: var(--aj-tinta);
  font: 15px/1.55 var(--aj-letra);
  box-shadow: 0 30px 80px rgba(15, 23, 42, .35);
  overflow: hidden;
}
.aj-central::backdrop { background: rgba(15, 23, 42, .55); }
.aj-central__caixa { display: grid; grid-template-rows: auto 1fr; width: 100%; height: 100%; min-height: 0; }

.aj-central__topo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--aj-linha);
  background: linear-gradient(#fff, var(--aj-fundo-2));
}
.aj-central__tit { display: flex; align-items: center; gap: 10px; margin: 0; font: 750 18px/1.2 var(--aj-letra); color: var(--aj-tinta); }
.aj-central__ic { width: 28px; height: 28px; flex: 0 0 auto; }
.aj-central__menu { display: none; }
.aj-central__x,
.aj-central__menu {
  appearance: none;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0 10px;
  height: 40px;
  min-width: 40px;
  border: 1.5px solid var(--aj-linha);
  border-radius: 10px;
  background: #fff;
  color: var(--aj-tinta);
  font: 600 14px/1 var(--aj-letra);
  cursor: pointer;
  justify-content: center;
}
.aj-central__x { display: inline-flex; font-size: 24px; font-weight: 400; }
.aj-central__x:hover,
.aj-central__menu:hover { background: #f1f5f9; }

.aj-busca { position: relative; flex: 1 1 280px; max-width: 440px; margin-left: auto; }
.aj-busca__lupa { position: absolute; left: 11px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: #64748b; stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.aj-busca input {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 12px 0 36px;
  border: 1.5px solid var(--aj-linha);
  border-radius: 10px;
  background: #fff;
  color: var(--aj-tinta);
  font: 400 14.5px/1 var(--aj-letra);
}
.aj-busca input:focus { outline: none; border-color: var(--aj-verde); box-shadow: 0 0 0 3px rgba(226, 80, 125, .16); }

.aj-central__corpo { display: grid; grid-template-columns: 280px 1fr; min-height: 0; position: relative; }

.aj-lado { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--aj-linha); background: var(--aj-fundo-2); }
.aj-lado__lista { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 6px 10px 14px; overscroll-behavior: contain; }
.aj-grupo__tit { margin: 16px 10px 5px; font: 700 11.5px/1.3 var(--aj-letra); letter-spacing: .06em; text-transform: uppercase; color: #64748b; }
.aj-grupo ul { list-style: none; margin: 0; padding: 0; }
.aj-item {
  appearance: none;
  display: block;
  width: 100%;
  margin: 1px 0;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #1e293b;
  font: 500 14px/1.35 var(--aj-letra);
  text-align: left;
  cursor: pointer;
}
.aj-item:hover { background: #eef2f6; }
.aj-item[aria-current="page"] { background: var(--aj-verde-claro); color: var(--aj-verde-escuro); font-weight: 700; box-shadow: inset 3px 0 0 var(--aj-verde); }

.aj-tourbox { display: grid; gap: 8px; padding: 14px; border-top: 1px solid var(--aj-linha); background: #fff; }
.aj-tourbox__tit { font: 700 14px/1.2 var(--aj-letra); }
.aj-tourbox__estado { margin: 0; font-size: 12.5px; color: var(--aj-fraca); }

.aj-conteudo { min-height: 0; overflow: auto; padding: 26px 36px 44px; overscroll-behavior: contain; }
.aj-artigo { max-width: 740px; }
.aj-artigo__grupo { margin: 0 0 4px; font: 700 12px/1.3 var(--aj-letra); letter-spacing: .05em; text-transform: uppercase; color: var(--aj-verde); }
.aj-artigo__tit { margin: 0 0 6px; font: 800 26px/1.2 var(--aj-letra); color: var(--aj-tinta); outline: none; }
.aj-artigo__resumo { margin: 0 0 16px; font-size: 16.5px; color: var(--aj-fraca); }
.aj-artigo__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.aj-artigo__corpo p,
.aj-artigo__corpo ul,
.aj-artigo__corpo ol { margin: 0 0 12px; }
.aj-artigo__corpo ul,
.aj-artigo__corpo ol { padding-left: 22px; }
/*  O CSS do site zera o marcador das listas; nos passos o número é a
    informação ("faça isto, depois isto") e tem de aparecer.               */
.aj-artigo__corpo ul { list-style: disc outside; }
.aj-artigo__corpo ol { list-style: decimal outside; }
.aj-artigo__corpo li::marker { color: var(--aj-verde); font-weight: 700; }
.aj-artigo__corpo li { margin-bottom: 6px; }
.aj-artigo__corpo b { color: #0b1324; }
.aj-nota { padding: 10px 14px; border-left: 3px solid var(--aj-verde); border-radius: 0 8px 8px 0; background: var(--aj-verde-claro); font-size: 14px; }
.aj-artigo__ver { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--aj-linha); }
.aj-artigo__ver b { display: block; margin-bottom: 6px; font-size: 13px; color: var(--aj-fraca); text-transform: uppercase; letter-spacing: .05em; }
.aj-artigo__ver ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }

.aj-achados__conta { margin: 0 0 14px; color: var(--aj-fraca); }
.aj-achados__parcial { margin: -8px 0 14px; font-size: 13px; color: var(--aj-fraca); }
.aj-achados__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 760px; }
.aj-resultado {
  appearance: none;
  display: grid;
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 1.5px solid var(--aj-linha);
  border-radius: 10px;
  background: #fff;
  color: var(--aj-tinta);
  font: 400 14px/1.45 var(--aj-letra);
  text-align: left;
  cursor: pointer;
}
.aj-resultado:hover { border-color: #f6cbd8; background: #fffafc; }
.aj-resultado__tit { font-size: 15.5px; font-weight: 700; }
.aj-resultado__grupo { font-size: 12px; color: var(--aj-verde); font-weight: 600; }
.aj-resultado__trecho { color: var(--aj-fraca); }
.aj-conteudo mark { background: #fef08a; color: inherit; border-radius: 3px; padding: 0 1px; }
.aj-achados__nada { color: var(--aj-fraca); }

/*  NO CELULAR a Central ocupa a tela, e o índice vira gaveta — aberta pelo
    botão "Índice" e fechada ao escolher um artigo.                        */
@media (max-width: 760px) {
  .aj-central { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .aj-central__topo { flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; }
  .aj-central__tit { flex: 1 1 auto; min-width: 0; font-size: 16px; }
  .aj-central__tit span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .aj-central__menu { display: inline-flex; }
  .aj-busca { order: 3; flex: 1 1 100%; max-width: none; margin: 0; }
  .aj-central__corpo { grid-template-columns: 1fr; }
  .aj-lado {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 2;
    width: min(86vw, 330px);
    transform: translateX(-104%);
    transition: transform .22s ease;
    box-shadow: 12px 0 30px rgba(15, 23, 42, .18);
  }
  .aj-central.is-menu .aj-lado { transform: none; }
  .aj-conteudo { padding: 18px 16px 34px; }
  .aj-artigo__tit { font-size: 22px; }
}

/* ═══════════════════════ A CAMADA: TUTORIAL E "MOSTRAR" ═══════════════════════ */

.aj-camada { position: fixed; inset: 0; z-index: var(--aj-z-camada); pointer-events: none; }
.aj-camada--mostrar { --aj-veu: rgba(15, 23, 42, .40); }

/*  O escuro é a SOMBRA do recorte — uma caixa transparente com um anel
    claro e uma sombra do tamanho da tela em volta.                        */
.aj-spot {
  position: fixed;
  border-radius: 12px;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, .95),
    0 0 0 6px rgba(226, 80, 125, .55),
    0 0 0 200vmax var(--aj-veu);
  pointer-events: none;
  transition: left .26s ease, top .26s ease, width .26s ease, height .26s ease, box-shadow .2s ease;
}
.aj-spot.is-vazio { box-shadow: 0 0 0 200vmax var(--aj-veu); }

.aj-bloq { position: fixed; pointer-events: auto; background: transparent; }

.aj-balao {
  position: fixed;
  z-index: 1;
  box-sizing: border-box;
  width: max-content;
  max-width: min(370px, calc(100vw - 24px));
  min-width: min(280px, calc(100vw - 24px));
  padding: 12px 16px 14px;
  border-radius: 14px;
  background: #fff;
  color: var(--aj-tinta);
  font: 14.5px/1.5 var(--aj-letra);
  text-align: left;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .35), 0 2px 6px rgba(15, 23, 42, .12);
  pointer-events: auto;
  transition: opacity .16s ease;
}
.aj-balao.is-trocando { opacity: .4; }
.aj-balao.is-cutuca { animation: ajCutuca .32s ease; }
@keyframes ajCutuca { 0%, 100% { translate: 0 } 30% { translate: -5px 0 } 70% { translate: 5px 0 } }

.aj-balao__seta { position: absolute; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); box-shadow: -2px -2px 4px rgba(15, 23, 42, .06); display: none; }
.aj-balao[data-lado="bottom"] .aj-balao__seta { display: block; top: -7px; left: calc(var(--aj-seta) - 7px); }
.aj-balao[data-lado="top"] .aj-balao__seta { display: block; bottom: -7px; left: calc(var(--aj-seta) - 7px); box-shadow: 2px 2px 4px rgba(15, 23, 42, .08); }
.aj-balao[data-lado="right"] .aj-balao__seta { display: block; left: -7px; top: calc(var(--aj-seta) - 7px); }
.aj-balao[data-lado="left"] .aj-balao__seta { display: block; right: -7px; top: calc(var(--aj-seta) - 7px); box-shadow: 2px 2px 4px rgba(15, 23, 42, .08); }

.aj-balao__topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.aj-balao__passo { font: 700 12px/1.2 var(--aj-letra); letter-spacing: .04em; text-transform: uppercase; color: var(--aj-verde); }
.aj-balao__x {
  appearance: none;
  width: 30px;
  height: 30px;
  margin: -4px -6px 0 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #64748b;
  font: 400 22px/1 var(--aj-letra);
  cursor: pointer;
}
.aj-balao__x:hover { background: #f1f5f9; color: var(--aj-tinta); }
.aj-balao__prog { height: 4px; margin: 2px 0 10px; border-radius: 2px; background: #e2e8f0; overflow: hidden; }
.aj-balao__prog i { display: block; height: 100%; background: var(--aj-verde); border-radius: 2px; transition: width .25s ease; }
.aj-balao__tit { margin: 0 0 4px; font: 750 17px/1.3 var(--aj-letra); color: var(--aj-tinta); }
.aj-balao__txt p { margin: 0 0 6px; }
.aj-balao__txt b { color: #0b1324; }
.aj-balao__nota { margin: 6px 0 4px; padding: 7px 10px; border-radius: 8px; background: #fff7e6; color: #7a4a00; font-size: 13.5px; }
.aj-balao__bts { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.aj-balao__bts .aj-bt { min-height: 34px; padding: 6px 12px; }

@media (prefers-reduced-motion: reduce) {
  .aj-botao, .aj-botao__dica, .aj-spot, .aj-balao, .aj-balao__prog i, .aj-lado { transition: none; }
  .aj-balao.is-cutuca { animation: none; }
}