/* ============================================================
   Tooltips contextuales — CSS propio, sin dependencias.
   Uso: data-tip="texto"  (+ opcional data-tip-pos="bottom").
   Sobre tokens de wp-base.css. Sin url() (WhiteNoise-safe).
   ============================================================ */
[data-tip]{ position:relative; }
[data-tip]::after, [data-tip]::before{
  position:absolute; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--wp-t), transform var(--wp-t); z-index:60;
}
[data-tip]::after{
  content:attr(data-tip); left:50%; bottom:calc(100% + 9px);
  transform:translateX(-50%) translateY(4px); max-width:240px; width:max-content;
  white-space:normal; text-align:center; background:var(--wp-ink); color:#fff;
  font-family:var(--wp-sans); font-size:.78rem; line-height:1.35; padding:7px 10px;
  border-radius:7px; box-shadow:var(--wp-shadow-sm);
}
[data-tip]::before{
  content:""; left:50%; bottom:calc(100% + 3px); transform:translateX(-50%) translateY(4px);
  border:5px solid transparent; border-top-color:var(--wp-ink);
}
[data-tip]:hover::after, [data-tip]:hover::before,
[data-tip]:focus-visible::after, [data-tip]:focus-visible::before{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
/* Posición inferior */
[data-tip][data-tip-pos="bottom"]::after{ top:calc(100% + 9px); bottom:auto; }
[data-tip][data-tip-pos="bottom"]::before{
  top:calc(100% + 3px); bottom:auto; border-top-color:transparent; border-bottom-color:var(--wp-ink);
}
@media (prefers-reduced-motion:reduce){ [data-tip]::after, [data-tip]::before{ transition:none; } }
/* En pantallas chicas los tooltips de hover no aportan; se ocultan. */
@media (max-width:640px){ [data-tip]::after, [data-tip]::before{ display:none; } }