/* ============================================================
   Tooltip global do Predyra (.pdr-tip).
   Origem: balao das telas de "Configurar Permissoes de Acesso", promovido a
   componente do app. Comportamento em js/pdr-tooltip.js.

   Mora no <body> com position:fixed: dentro de modal/tabela ele seria cortado
   por overflow:hidden ou pelo scroll do corpo. z-index acima do overlay de
   modal do app (1200) e do portal de menus.
   ============================================================ */
.pdr-tip {
    position: fixed;
    z-index: 3100;
    max-width: 264px;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    background: var(--predyra-navy, #050b3f);
    color: #dfe7ff;
    font-size: 0.72rem;
    line-height: 1.4;
    box-shadow: 0 12px 26px rgba(5, 11, 63, 0.3);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.dark .pdr-tip {
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.55);
}

/* A entrada desliza no eixo do apontamento. */
.pdr-tip[data-placement="top"] { transform: translateY(3px); }
.pdr-tip[data-placement="bottom"] { transform: translateY(-3px); }
.pdr-tip[data-placement="right"] { transform: translateX(-3px); }
.pdr-tip[data-placement="left"] { transform: translateX(3px); }

.pdr-tip[data-show="1"] {
    opacity: 1;
    transform: translate(0, 0);
}

.pdr-tip-title {
    display: block;
    font-weight: 600;
    color: #ffffff;
}

/* Da segunda linha em diante: texto de apoio, mais fraco. */
.pdr-tip-sub {
    display: block;
    margin-top: 0.15rem;
    color: #a9b8e4;
    white-space: pre-line;
}

/* A seta acompanha o centro do gatilho: quando o balao e empurrado pela borda
   da janela, --pdr-tip-arrow deixa de ser 50%. */
.pdr-tip::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    background: inherit;
    transform: rotate(45deg);
}

.pdr-tip[data-placement="top"]::after {
    bottom: -4px;
    left: var(--pdr-tip-arrow, 50%);
    margin-left: -4.5px;
}

.pdr-tip[data-placement="bottom"]::after {
    top: -4px;
    left: var(--pdr-tip-arrow, 50%);
    margin-left: -4.5px;
}

.pdr-tip[data-placement="right"]::after {
    left: -4px;
    top: var(--pdr-tip-arrow, 50%);
    margin-top: -4.5px;
}

.pdr-tip[data-placement="left"]::after {
    right: -4px;
    top: var(--pdr-tip-arrow, 50%);
    margin-top: -4.5px;
}