/* ==========================================================================
   Central de Ajuda — sobrescritas do Driver.js

   Arquivo proprio, e nao um bloco em 3d6.css, porque o painel do Gestor
   (barraquinha/templates/barraquinha/gestor/painel.html) nao carrega o 3d6.css
   nem o Bootstrap e precisa exatamente dos mesmos tours. Nada aqui depende de
   classe do Bootstrap.

   Tudo e desenhado para o DEDO: a estacao do caixa e um monitor sensivel ao
   toque de 1024x768. Alvo minimo de 44px, fonte de 16px nos baloes, nenhum
   estado dependendo de hover.

   O botao "Ajuda" da barra do alto, o painel lateral da Central e a busca
   sairam em 29/10/2026: a porta da ajuda e o painel da 3D6IA, com o CSS
   proprio (static/ia3d6/ia3d6.css).
   ========================================================================== */

/* ── Driver.js: a pagina continua viva durante o tour ──
   O voluntario segue o tour FAZENDO: escolhe o produto, digita as unidades,
   toca num campo que nao e o destacado. O driver.css 1.3.1 faz o contrario:
   `.driver-active * { pointer-events: none }` congela a pagina inteira e o
   `path` da cortina (pointer-events: auto inline) captura o toque — todo
   toque fora do destaque fechava o tour, e quem seguia ao vivo perdia a
   ajuda no meio. Aqui a pagina volta a receber toques (mesma especificidade
   do driver.css, carregado depois dele) e a cortina deixa de capturar (o
   `!important` vence o inline do path). O toque chega ao elemento de baixo e
   o tour continua; ele so fecha pelo x, pelo Esc ou ao chegar ao fim. O
   escurecimento continua o mesmo. */
.driver-active *:not(.pe-none) { pointer-events: auto; }
.driver-overlay, .driver-overlay path { pointer-events: none !important; }
.driver-popover-footer .driver-popover-btn-disabled { pointer-events: none; }

/* ── Driver.js: baloes legiveis e botoes de 44px ── */
.driver-popover.ajuda-popover {
  /* Largura que nao depende do `left`. O Driver.js mede o balao ANTES de dar o
     `left` final, e com `width: auto` o balao encolhe quando o recebe (a largura
     disponivel e a da tela menos o `left`): o texto refluxa, ganha uma linha e,
     preso pela borda de baixo, o balao cresce para cima, por cima do destaque.
     Acontecia no celular (menos de ~390 px) e em qualquer balao encostado na
     borda direita — os icones de acao das listas —, e um `refresh` so (`ir`, em
     80-motor.js) nao fechava: o `left` depende da largura, e a largura do
     `left`. Com `max-content` limitado pela tela, a primeira medida e a final
     coincidem. */
  width: max-content;
  max-width: min(380px, calc(100vw - 20px));
  padding: 18px 20px 16px;
  border-radius: 12px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #1c1f24;
}
.driver-popover.ajuda-popover .driver-popover-title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
}
.driver-popover.ajuda-popover .driver-popover-description {
  font-size: 16px;
  line-height: 1.5;
  margin-top: 6px;
}
.driver-popover.ajuda-popover .driver-popover-description p { margin: 0 0 .5rem; }
.driver-popover.ajuda-popover .driver-popover-description p:last-child { margin-bottom: 0; }
.driver-popover.ajuda-popover .ajuda-aviso {
  margin-top: .6rem;
  padding: .5rem .7rem;
  border-radius: .5rem;
  background: rgba(39, 168, 98, .12);
  color: #1e8c52;
  font-weight: 600;
}
.driver-popover.ajuda-popover .driver-popover-close-btn {
  width: 44px;
  height: 44px;
  font-size: 26px;
  line-height: 44px;
  color: #6b7280;
}
.driver-popover.ajuda-popover .driver-popover-footer { margin-top: 14px; }
.driver-popover.ajuda-popover .driver-popover-progress-text { font-size: .9rem; color: #6b7280; }
.driver-popover.ajuda-popover .driver-popover-navigation-btns button {
  min-height: 44px;
  min-width: 44px;
  padding: 0 16px;
  border-radius: .55rem;
  font-size: 15px;
  font-weight: 600;
  text-shadow: none;
}
.driver-popover.ajuda-popover .driver-popover-next-btn {
  background: #27a862;
  border-color: #27a862;
  color: #fff;
}

/* ── Driver.js: a janela de conciliacao sai do centro durante o tour ──
   "Confirmar conciliacao" (`#modalConciliar`, nas telas de fechar e de
   conciliar) tem 500 x 466 px e abre centralizada. Numa tela de 1024 x 768
   sobram ~150 px embaixo e ~260 px de cada lado, e o balao (380 x 219 px) nao
   cabe em lado nenhum: o Driver.js o encosta no pe da tela, por cima do rodape
   da janela. O "Voltar e recontar" ficava 100% coberto e o "Confirmar", 65%:
   justo o que o passo manda tocar (conferencia no navegador de 21/10/2026).
   Ao lado do centro o balao so cabe a partir de ~1300 px de largura; entre 900
   e 1300 px a janela vai para a esquerda e o balao abre a direita dela, sobre o
   fundo escurecido. So durante o tour (`driver-active`, no <body>): fora dele
   a janela segue centralizada. */
@media (min-width: 900px) and (max-width: 1299.98px) {
  body.driver-active #modalConciliar .modal-dialog { margin-left: 1rem; }
}