/* kds-tooltip — EL tooltip del sistema (misma cara que la etiqueta flotante de
   kds-action: fondo gris oscuro, radio 4, pico cuadrado rotado, materialize).
   kds-tooltip.js intercepta cualquier [title] del admin al hover/foco, apaga el
   tooltip nativo del navegador y muestra este. Singleton fijo, nunca roba eventos. */

.kds-tooltip {
    position: fixed;
    z-index: 3000;
    max-width: 21.25rem;
    padding: .26rem .55rem;
    border-radius: .25rem;
    background: rgba(97, 97, 97, .92);
    color: #fff;
    font-size: .74rem;
    font-weight: 500;
    line-height: 1.35;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, .3125rem);
    filter: blur(2px);
    transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1),
                transform 200ms cubic-bezier(0.2, 0, 0, 1),
                filter 200ms cubic-bezier(0.2, 0, 0, 1);
}

.kds-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: .5rem;
    height: .5rem;
    margin: -.25rem 0 0 -.25rem;
    background: inherit;
    transform: rotate(45deg);
}

.kds-tooltip.is-below::after {
    top: 0;
}

.kds-tooltip.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
    filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
    .kds-tooltip { transition: none; }
    .kds-tooltip.is-visible { transform: translate(-50%, 0); filter: none; }
}