/* Tooltip universal (ver js/tooltip.js) */
#app-tooltip {
    --tooltip-bg: #111827;
    --tooltip-fg: #f9fafb;
    position: fixed;
    z-index: 2147483000;
    display: none;
    max-width: min(320px, calc(100vw - 16px));
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px) scale(.97);
    transition: opacity .14s ease, transform .14s ease;
}

#app-tooltip.is-visible {
    opacity: 1;
    transform: none;
}

#app-tooltip[data-position="bottom"] { transform-origin: top center; }
#app-tooltip[data-position="top"] { transform-origin: bottom center; }

.app-tooltip__text {
    padding: 7px 11px;
    border-radius: 8px;
    background: var(--tooltip-bg);
    color: var(--tooltip-fg);
    font: 500 12px/1.4 "Segoe UI", "Inter", system-ui, sans-serif;
    letter-spacing: .01em;
    text-align: center;
    overflow-wrap: anywhere;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .28);
}

.app-tooltip__arrow {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--tooltip-bg);
    transform: translate(-50%, -50%) rotate(45deg);
    border-radius: 2px;
}

#app-tooltip[data-position="top"] .app-tooltip__arrow { bottom: -5px; top: auto; transform: translate(-50%, 0) rotate(45deg); }
#app-tooltip[data-position="bottom"] .app-tooltip__arrow { top: -5px; transform: translate(-50%, 0) rotate(45deg); }
#app-tooltip[data-position="left"] .app-tooltip__arrow { right: -5px; left: auto; transform: translate(0, -50%) rotate(45deg); }
#app-tooltip[data-position="right"] .app-tooltip__arrow { left: -5px; transform: translate(0, -50%) rotate(45deg); }

/* No tema escuro a caixa clareia para manter contraste com o fundo. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #app-tooltip {
        --tooltip-bg: #e5e7eb;
        --tooltip-fg: #111827;
    }
}

:root[data-theme="dark"] #app-tooltip {
    --tooltip-bg: #e5e7eb;
    --tooltip-fg: #111827;
}

@media (prefers-reduced-motion: reduce) {
    #app-tooltip { transition: none; }
}