/* ============================================================
   info-tip.css — ícone de informação (RXInfoTip, js/rx-core/info-tip.js)
   Extraído do CommunityRX (Out 2026). Só variáveis do contrato; a borda
   usa a cor do menu de âncoras colado quando o produto a define.
   ============================================================ */
.rx-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--rx-text-3);
  cursor: pointer;
  vertical-align: middle;
}
.rx-info:focus-visible { outline: 2px solid var(--rx-accent); outline-offset: 2px; border-radius: 50%; }
.rx-info-icon { display: flex; }
.rx-info-icon svg { width: 16px; height: 16px; }
@media (hover: hover) { .rx-info:hover { color: var(--rx-accent-text); } }
.rx-info.rx-info-open { color: var(--rx-accent-text); }
.rx-info-tip {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 30;
  width: max-content;
  max-width: min(300px, 80vw);
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--nav-pill-border-stuck, var(--rx-border-strong));
  border-radius: 8px;
  background: var(--rx-surface-1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  font-family: var(--rx-font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.5;
  text-align: left;
  color: var(--rx-text-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  pointer-events: none;
}
.rx-info-tip p { margin: 0 0 0.375rem; }
.rx-info-tip p:last-child { margin-bottom: 0; }
@media (hover: hover) {
  .rx-info:hover .rx-info-tip { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
}
.rx-info.rx-info-open .rx-info-tip { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }