/* LACTOS360 1.15.0 — ajuda dos campos e da tela (ajuda.js). Usa os tokens de lactos.css. */
:root { --lx-ajuda-css: 1; }
.aj-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; min-height: 32px; width: 32px; height: 32px; margin-left: 6px; padding: 0; vertical-align: middle;
  border: 1px solid var(--borda-forte, var(--borda)); border-radius: 50%;
  background: var(--sup); color: var(--cor); font-family: inherit; font-weight: 700; font-size: .8rem; line-height: 1; cursor: pointer;
}
.aj-btn:hover { background: var(--sup2, var(--sup)); border-color: var(--cor); }
.aj-btn:focus-visible, .aj-caixa button:focus-visible, .aj-p-x:focus-visible { outline: 3px solid var(--cor); outline-offset: 2px; }
.aj-btn[aria-expanded="true"] { background: var(--cor); color: var(--cor-txt, #fff); border-color: var(--cor); }
.aj-btn-demo { width: 22px; height: 22px; min-width: 22px; min-height: 22px; margin: 0 2px; pointer-events: none; font-size: .72rem; }

.campo > label .aj-btn { margin-top: -4px; margin-bottom: -4px; }
.aj-caixa {
  margin: 2px 0 4px; padding: 10px 12px; border: 1px solid var(--borda); border-left: 4px solid var(--cor);
  border-radius: 8px; background: var(--sup2, var(--sup)); color: var(--txt); font-size: .85rem; line-height: 1.45;
}
.aj-caixa p { margin: 0 0 6px; }
.aj-caixa p:last-child { margin-bottom: 0; }
.aj-funcao { color: var(--txt); }
.aj-exemplo, .aj-formato { color: var(--txt2); }
.aj-ex-txt { font-style: italic; }
.aj-cuidado { color: var(--txt); background: var(--aviso-bg); border-left: 3px solid var(--aviso); padding: 6px 8px; border-radius: 6px; }
.aj-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.aj-acoes button {
  min-height: 32px; padding: 0 12px; border: 1px solid var(--borda-forte, var(--borda)); border-radius: 8px;
  background: var(--sup); color: var(--txt); font: inherit; font-size: .82rem; cursor: pointer;
}
.aj-acoes .aj-usar { background: var(--cor); border-color: var(--cor); color: var(--cor-txt, #fff); }
.aj-acoes button[hidden] { display: none; }
.aj-msg { color: var(--txt2); min-height: 0; }
.aj-msg:empty { display: none; }
[data-aj-exemplo="1"] { outline: 2px dashed var(--aviso); outline-offset: 1px; }

/* ajuda do campo em janelinha (modal) */
.aj-cab { display: none; }
.aj-caixa.aj-modal {
  position: fixed; z-index: 902; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(460px, calc(100vw - 32px)); max-height: min(80vh, 640px); overflow-y: auto; margin: 0;
  padding: 0 18px 16px; border: 1px solid var(--borda); border-left: 1px solid var(--borda); border-radius: 16px;
  background: var(--sup); box-shadow: var(--sombra-3, 0 20px 50px rgb(7 28 50 / .35)); font-size: .92rem; line-height: 1.5;
}
.aj-caixa.aj-modal .aj-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; position: sticky; top: 0; margin: 0 -18px 10px; padding: 12px 12px 10px 18px;
  background: var(--sup); border-bottom: 1px solid var(--borda); border-radius: 16px 16px 0 0;
}
.aj-caixa.aj-modal .aj-titulo { font-size: 1rem; }
.aj-caixa.aj-modal .aj-x { min-width: 40px; min-height: 40px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--txt); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.aj-caixa.aj-modal .aj-x:hover { background: var(--sup2, var(--borda)); }
.aj-fundo-campo { z-index: 901; }
.aj-caixa.aj-modal .aj-acoes button { min-height: 40px; }

/* painel da tela */
body.aj-aberto { overflow: hidden; }
.aj-fundo { position: fixed; inset: 0; z-index: 900; background: rgb(7 28 50 / .5); }
.aj-fundo[hidden], .aj-painel[hidden] { display: none; }
.aj-painel {
  position: fixed; z-index: 901; top: 0; right: 0; bottom: 0; width: min(440px, 100%);
  display: flex; flex-direction: column; background: var(--sup); color: var(--txt);
  border-left: 1px solid var(--borda); box-shadow: var(--sombra-3);
}
.aj-p-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--borda); }
.aj-p-topo h2 { margin: 0; font-size: 1.05rem; }
.aj-p-x { min-width: 40px; min-height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--txt); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.aj-p-x:hover { background: var(--sup2, var(--borda)); }
.aj-p-corpo { padding: 14px 16px 24px; overflow-y: auto; font-size: .92rem; line-height: 1.5; }
.aj-p-corpo h3 { margin: 16px 0 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--txt2); }
.aj-p-corpo p, .aj-p-corpo ol, .aj-p-corpo ul { margin: 0 0 8px; }
.aj-p-corpo ol, .aj-p-corpo ul { padding-left: 22px; }
.aj-p-corpo li { margin-bottom: 4px; }
.aj-p-aviso { padding: 8px 10px; border-radius: 8px; background: var(--aviso-bg); color: var(--txt); border-left: 3px solid var(--aviso); font-size: .85rem; }
.aj-cuidados li::marker { color: var(--aviso); }
.aj-links { list-style: none; padding-left: 0 !important; }
.aj-links a { display: inline-block; padding: 4px 0; min-height: 32px; }
.aj-p-rodape { margin-top: 18px; color: var(--mudo); font-size: .8rem; }
.aj-p-corpo kbd { padding: 1px 6px; border: 1px solid var(--borda-forte, var(--borda)); border-radius: 4px; background: var(--sup2, var(--sup)); color: var(--txt); font: inherit; font-size: .8rem; }   /* 1.17.0: cor própria (contraste nas famílias externas) */

/* "Mostrar onde" */
body.aj-mostrar .campo:has(.aj-btn) { box-shadow: 0 0 0 2px color-mix(in srgb, var(--cor) 45%, transparent); border-radius: 8px; }
.aj-obrig-campo { box-shadow: 0 0 0 2px var(--aviso) !important; border-radius: 8px; }

@media (max-width: 640px) {
  .aj-caixa.aj-modal { top: auto; bottom: 0; left: 0; transform: none; width: 100%; max-height: 85vh; border-radius: 16px 16px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .aj-painel { width: 100%; top: 8%; border-left: 0; border-top: 1px solid var(--borda); border-radius: 16px 16px 0 0; }
  .aj-caixa { font-size: .9rem; }
}
@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 641px) { .aj-caixa.aj-modal { animation: aj-pop .14s ease-out; } }
  @keyframes aj-pop { from { opacity: 0; transform: translate(-50%, -48%); } to { opacity: 1; transform: translate(-50%, -50%); } }
  .aj-painel { animation: aj-entra .18s ease-out; }
  @keyframes aj-entra { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}
:root[data-ajuda-campos="desligada"] .aj-btn, :root[data-ajuda-campos="desligada"] .aj-caixa { display: none; }
@media print { .aj-btn, .aj-caixa, .aj-painel, .aj-fundo, .aj-fundo-campo, #btn-ajuda { display: none !important; } }

/* 1.15.1: interruptores (Cliente, Fornecedor...) com o botão "?" ganham uma coluna mais larga e não passam por cima do vizinho */
@media (min-width: 641px) { .campo.col-1:has(> .interruptor), .campo.col-2:has(> .interruptor) { grid-column: span 3; } }
.interruptor { max-width: 100%; gap: 8px; }
.interruptor > span:not(.trilho) { min-width: 0; }
.interruptor .aj-btn { margin-left: 0; flex: none; width: 28px; height: 28px; min-width: 28px; min-height: 28px; }
.aj-nota { color: var(--txt); background: var(--info-bg, var(--fundo-2, #EDF6FB)); border-left: 3px solid var(--info, var(--primaria, #146CC2)); padding: 6px 8px; border-radius: 6px; }

/* 1.17.0: "?" no cabeçalho de uma coluna de tabela, ao lado de um controle sem rótulo visível e na célula quando o cabeçalho some (celular) */
th .aj-btn-coluna { width: 28px; height: 28px; min-width: 28px; min-height: 28px; margin-left: 4px; font-size: .72rem; vertical-align: middle; }
.aj-btn-solto { margin: 4px 0 0 0; }
.aj-btn-solto + .aj-caixa { margin-top: 6px; }
.aj-btn-cel { margin: 4px 0 0 6px; width: 28px; height: 28px; min-width: 28px; min-height: 28px; font-size: .72rem; }
.aj-btn-cel[hidden] { display: none; }