/* ======================================== Name tooltip — revela nombre completo al tap (ver name_tooltip_controller.js). Montado en , position:fixed, fuera de overflows. ======================================== */ .name-tooltip { position: fixed; z-index: 1000; max-width: 260px; padding: 0.4rem 0.625rem; background: var(--bg-2); color: var(--text-1); font-size: 0.8125rem; font-weight: 500; line-height: 1.3; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); white-space: normal; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 0.14s ease, transform 0.14s ease; } .name-tooltip[data-placement="bottom"] { transform: translateY(-4px); } .name-tooltip.is-visible { opacity: 1; transform: translateY(0); } /* Flechita: cuadradito rotado que hereda fondo + borde del bubble. */ .name-tooltip::after { content: ""; position: absolute; left: var(--arrow-x, 50%); width: 9px; height: 9px; background: var(--bg-2); border: 1px solid var(--border); transform: translateX(-50%) rotate(45deg); } .name-tooltip[data-placement="top"]::after { bottom: -5px; border-top: none; border-left: none; } .name-tooltip[data-placement="bottom"]::after { top: -5px; border-bottom: none; border-right: none; }