/* ======================================== Tooltip genérico estilado (tooltip_controller.js). Montado en , position:fixed, fuera de overflows. Para etiquetas cortas on hover/focus/tap (ej. flecha de tendencia del ranking: "Subió 2 puestos"). ======================================== */ .tooltip-bubble { position: fixed; z-index: 1000; max-width: 220px; padding: 0.35rem 0.6rem; background: var(--bg-2); color: var(--ink); font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.04em; line-height: 1.3; white-space: nowrap; border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 0.14s ease, transform 0.14s ease; } .tooltip-bubble[data-placement="bottom"] { transform: translateY(-4px); } .tooltip-bubble.is-visible { opacity: 1; transform: translateY(0); } /* Flechita: cuadradito rotado que hereda fondo + borde del bubble. */ .tooltip-bubble::after { content: ""; position: absolute; left: var(--arrow-x, 50%); width: 9px; height: 9px; background: var(--bg-2); border: 1px solid var(--line-strong); transform: translateX(-50%) rotate(45deg); } .tooltip-bubble[data-placement="top"]::after { bottom: -5px; border-top: none; border-left: none; } .tooltip-bubble[data-placement="bottom"]::after { top: -5px; border-bottom: none; border-right: none; }