/* Central de Ajuda — "?" ao lado das opções de administração e página /ajuda.
   Padrão comum aos sistemas ligados ao Conecta. Paleta Quimatic: preto #1A1A1A +
   laranja #F05A22, sem azul. Sem JavaScript: o balão é um <details>. */

.ds .aj{display:inline-block;position:relative;vertical-align:middle;margin-left:6px;text-transform:none;letter-spacing:normal}
.ds .aj__q{list-style:none;cursor:pointer;width:20px;height:20px;border-radius:50%;
  display:inline-grid;place-items:center;font-size:.72rem;font-weight:800;line-height:1;
  background:#fff;color:var(--qmblue,#1A1A1A);border:1.5px solid var(--qmgray-500,#8a8a8a);user-select:none}
.ds .aj__q::-webkit-details-marker{display:none}
.ds .aj__q::marker{content:""}
.ds .aj__q:hover,.ds .aj[open] .aj__q{background:var(--qmorange,#F05A22);border-color:var(--qmorange,#F05A22);color:var(--qmblue,#1A1A1A)}
.ds .aj__q:focus-visible{outline:2px solid var(--qmorange,#F05A22);outline-offset:2px}

.ds .aj__balao{position:absolute;z-index:70;top:26px;left:-10px;width:min(380px,86vw);
  background:#fff;color:var(--qmgray-900,#1A1A1A);border:1px solid var(--qmgray-200,#E0E0E0);
  border-top:3px solid var(--qmorange,#F05A22);border-radius:8px;padding:12px 14px;
  box-shadow:0 8px 24px rgba(0,0,0,.16);font-size:.82rem;font-weight:400;line-height:1.45;
  text-transform:none;letter-spacing:normal;white-space:normal;text-align:left;cursor:auto}
.ds .aj__tit{margin:0 0 6px;font-weight:700;font-size:.9rem;color:var(--qmblue,#1A1A1A)}
.ds .aj__mais{display:inline-block;margin-top:8px;font-size:.76rem;font-weight:600;
  color:var(--pq-laranja-texto,#bf3f0c);text-decoration:underline}

.ds .aj-faz,.ds .aj-txt{margin:0 0 6px}
.ds .aj-rot{margin:8px 0 4px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--qmgray-700,#555)}
.ds .aj-muda{margin:0;display:grid;grid-template-columns:minmax(90px,auto) 1fr;gap:4px 10px}
.ds .aj-muda dt{font-weight:700;color:var(--qmblue,#1A1A1A)}
.ds .aj-muda dd{margin:0}
.ds .aj-atencao{margin:8px 0 0;padding:7px 9px;border-radius:6px;background:#fff4ef;border-left:3px solid var(--pq-laranja-texto,#bf3f0c)}
.ds .aj-selo{display:inline-block;margin-bottom:6px;padding:2px 8px;border-radius:999px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.ds .aj-selo--off{background:#1A1A1A;color:#fff}
.ds .aj-selo--parcial{background:#fff4ef;color:var(--pq-laranja-texto,#bf3f0c);border:1px solid #f6c3ad}

/* Linha "Entenda as colunas": no celular a tabela vira cartões e o cabeçalho some,
   então o "?" das colunas mora fora da tabela. */
.ds .aj-legenda{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:0 0 10px;font-size:.8rem;color:var(--pq-legenda,#6e6e6e)}
.ds .aj-legenda > span{display:inline-flex;align-items:center;white-space:nowrap}
.ds .aj-legenda .aj{margin-left:4px}

@media (min-width:641px){
  /* Dentro de tabela com rolagem lateral o balão solto seria cortado:
     ali ele abre no próprio lugar, empurrando a linha. */
  .ds .ds-card--table .aj__balao{position:static;margin-top:6px;width:auto;max-width:440px;box-shadow:none}
}

@media (max-width:640px){
  /* No celular o balão vira uma folha presa ao rodapé da tela, legível e rolável. */
  .ds .aj__balao{position:fixed;left:12px;right:12px;bottom:12px;top:auto;width:auto;max-height:70vh;overflow:auto;
    z-index:210;box-shadow:0 -4px 28px rgba(0,0,0,.28)}
  .ds .aj-muda{grid-template-columns:1fr}
  .ds .aj-muda dd{margin-bottom:6px}
}

/* Página /ajuda */
.ds .aj-pag__busca{width:100%;max-width:480px;margin:2px 0 0}
.ds .aj-pag__tela{margin-bottom:22px}
.ds .aj-pag__tela h3{font-size:1rem;color:var(--qmblue,#1A1A1A);margin:0 0 4px}
.ds .aj-pag__tela > p{margin:0 0 10px;color:var(--pq-legenda,#6e6e6e);font-size:.85rem}
.ds .aj-pag__item{background:#fff;border:1px solid var(--qmgray-200,#E0E0E0);border-radius:10px;padding:12px 14px;margin-bottom:8px;font-size:.86rem;line-height:1.5;scroll-margin-top:80px}
.ds .aj-pag__item:target{border-color:var(--qmorange,#F05A22);box-shadow:0 0 0 2px rgba(240,90,34,.2)}
.ds .aj-pag__item h4{margin:0 0 6px;font-size:.94rem;color:var(--qmblue,#1A1A1A)}
.ds .aj-pag__vazio{color:var(--pq-legenda,#6e6e6e)}