/* ============================================================================ SBTooltip — tooltip custom global y reutilizable ("CSS Tooltip"). Card blanco con acento azul: icono + título + descripción + línea ✓ + flecha. Se monta en (no lo recorta ningún overflow) y se posiciona por JS. Uso: en cualquier elemento, agregar: data-sb-tooltip-title="…" (título) data-sb-tooltip-desc="…" (descripción) — o data-sb-tooltip="…" data-sb-tooltip-feature="…" (línea con ✓, opcional) ============================================================================ */ .sb-tooltip { position: fixed; z-index: 10001; /* por encima del modal del widget (.pw = 9999) */ top: 0; left: 0; max-width: 320px; padding: 13px 15px; background: #ffffff; border: 1px solid #2563eb; border-radius: 14px; box-shadow: 0 14px 36px rgba(37, 99, 235, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08); color: #374151; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease; pointer-events: none; } .sb-tooltip.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .sb-tooltip__head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; } .sb-tooltip__icon { flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(37, 99, 235, 0.12); color: #2563eb; display: inline-flex; align-items: center; justify-content: center; } .sb-tooltip__icon svg { width: 15px; height: 15px; } .sb-tooltip__title { font-size: 0.9rem; font-weight: 700; color: #111827; line-height: 1.2; } .sb-tooltip__desc { margin: 0; font-size: 0.82rem; line-height: 1.45; color: #4b5563; white-space: normal; word-break: break-word; } .sb-tooltip__feature { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 0.78rem; color: #6b7280; } .sb-tooltip__feature svg { flex: none; width: 14px; height: 14px; color: #2563eb; } /* Flecha (cuadrado rotado con el mismo fondo/borde azul). */ .sb-tooltip__arrow { position: absolute; width: 12px; height: 12px; background: #ffffff; transform: rotate(45deg); } /* Tooltip ARRIBA del trigger → flecha en el borde inferior, apuntando abajo. */ .sb-tooltip:not(.sb-tooltip--below) .sb-tooltip__arrow { bottom: -6px; border-right: 1px solid #2563eb; border-bottom: 1px solid #2563eb; } /* Tooltip DEBAJO del trigger → flecha en el borde superior, apuntando arriba. */ .sb-tooltip--below .sb-tooltip__arrow { top: -6px; border-left: 1px solid #2563eb; border-top: 1px solid #2563eb; } @media (max-width: 480px) { .sb-tooltip { max-width: calc(100vw - 24px); } }