/* Ícone de ajuda (i) dos campos de formulário — padrão do projeto.
   A legenda do campo vive dentro dele, junto da origem técnica do dado. */
.ajuda { position: relative; display: inline-flex; vertical-align: middle; margin-left: .35rem; }

.ajuda-btn {
    width: 17px; height: 17px; padding: 0; border-radius: 50%;
    border: 1px solid var(--pm-primary, #005d90); background: #fff; color: var(--pm-primary, #005d90);
    font: 700 11px/1 Georgia, "Times New Roman", serif; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.ajuda-btn:hover, .ajuda-btn:focus-visible, .ajuda-btn[aria-expanded="true"] {
    background: var(--pm-primary, #005d90); color: #fff; outline: none;
}
.ajuda-btn:focus-visible { box-shadow: 0 0 0 3px rgba(0,93,144,.25); }

.ajuda-balao {
    position: absolute; z-index: 1080; top: calc(100% + 7px); left: -4px;
    width: max-content; max-width: 320px;
    background: var(--pm-primary-dark, #12395c); color: #fff; border-radius: .45rem; padding: .6rem .7rem;
    font-size: .78rem; font-weight: 400; line-height: 1.45; text-align: left; white-space: normal;
    box-shadow: 0 6px 20px rgba(0,0,0,.22);
    /* O (i) costuma ficar dentro de rótulo em caixa alta; sem isto a legenda
       inteira sai em maiúsculas e com o espaçamento de letra do rótulo. */
    text-transform: none; letter-spacing: normal; font-style: normal;
}
.ajuda-balao::before {
    content: ""; position: absolute; bottom: 100%; left: 8px;
    border: 6px solid transparent; border-bottom-color: var(--pm-primary-dark, #12395c);
}
.ajuda-balao strong, .ajuda-balao b { color: #fff; }
.ajuda-balao code { background: rgba(255,255,255,.15); padding: 0 .25rem; border-radius: .2rem; }

/* Vira para a esquerda quando o ícone está perto da borda direita da tela. */
.ajuda--esquerda .ajuda-balao { left: auto; right: -4px; }
.ajuda--esquerda .ajuda-balao::before { left: auto; right: 8px; }

.ajuda-texto { display: block; }
.ajuda-tec {
    display: block; margin-top: .45rem; padding-top: .4rem;
    border-top: 1px solid rgba(255,255,255,.22);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .71rem; color: #c8dcec; word-break: break-all;
}

@media (max-width: 575.98px) {
    .ajuda-balao { max-width: min(280px, calc(100vw - 2.5rem)); }
}