/* Canal ÚNICO de tooltip (pareja de InsTooltip.razor + insTooltip.js). Servido como static web asset del RCL: _content/InsCore.Ui.Gadgets/insTooltip.css, enlazado una vez en el de cada host. Aquí NO se posiciona nada: la burbuja visible es una sola, hija de , colocada por insTooltip.js con getBoundingClientRect + volteo. Por eso desaparecieron el position:absolute del envoltorio y el juego de clases por lado: ambos existían para que el navegador colocara la burbuja DENTRO del disparador, que es exactamente lo que la hacía recortable por cualquier ancestro con overflow (fila pegada al borde de una tabla con scroll, cuerpo de diálogo, drawer colapsado). */ /* Envoltorio: solo layout. inline-flex para que no rompa la línea del disparador que envuelve. 🔴 `min-width:0` + `max-width:100%` NO son adorno; cierran un defecto medido en la fase 9 (L4, barrido de `white-space:nowrap`). `inline-flex` dimensiona a CONTENIDO (shrink-to-fit). Cuando el disparador es el patrón habitual de «una línea con puntos suspensivos» —`overflow:hidden; text-overflow:ellipsis; white-space:nowrap`, con el texto entero en el tooltip— ese hijo no recibe NINGUNA anchura de referencia: el envoltorio crece hasta donde llegue el texto sin cortar, así que los puntos suspensivos NO APARECEN NUNCA y lo que ocurre es que el texto empuja la tarjeta o la fila hasta salirse. Es la misma clase del caso testigo (una celda con `nowrap` cuyo formateador devolvía una frase entera y desbordaba la tarjeta), y aparece en cualquier pantalla que trunque dentro de un tooltip SIN poner además un `max-width` propio al hijo. Con `max-width:100%` el envoltorio no puede pasar del ancho de su bloque contenedor, así que el hijo sí tiene contra qué recortar; con `min-width:0` puede además encoger dentro de un padre flex, que es donde viven casi todas las tarjetas. Los disparadores cortos (un botón de icono) no notan nada: siguen muy por debajo del 100 %. Se arregla AQUÍ y no pantalla a pantalla porque el envoltorio es único para los tres hosts. */ .ins-tt { display: inline-flex; min-width: 0; max-width: 100%; } /* Burbuja INLINE: la rinde Blazor (SSOT del contenido, ya localizado) y NUNCA se ve. display:none la saca del layout y del árbol de accesibilidad; insTooltip.js clona su contenido a la flotante. El nombre accesible del disparador NO depende de esto: cuando un control no tiene texto visible, lleva su propio aria-label (regla del canal único). */ .ins-tt__bubble { display: none; } /* Burbuja FLOTANTE única (#ins-tt-layer). Hija directa de y position:fixed → coordenadas de viewport, fuera de todo contenedor con overflow y de todo contexto de apilamiento intermedio. */ .ins-tt-float { position: fixed; top: 0; left: 0; z-index: 19000; /* sobre diálogos/popovers de MudBlazor, bajo el modal de reconexión (20000) */ pointer-events: none; /* el tooltip nunca intercepta el ratón */ opacity: 0; visibility: hidden; width: max-content; max-width: min(320px, 90vw); padding: 0.35rem 0.55rem; border-radius: 6px; background: #20262e; /* gris oscuro, como el tooltip de MudBlazor */ color: #fff; font-size: 0.75rem; font-weight: 500; line-height: 1.35; text-align: center; white-space: normal; overflow-wrap: anywhere; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); transition: opacity 0.12s ease, visibility 0.12s ease; } .ins-tt-float.is-visible { opacity: 1; visibility: visible; } @media (prefers-reduced-motion: reduce) { .ins-tt-float { transition: none; } }