/* Ayuda de estados (comun/ayuda.js). La cargan la tienda, el panel, el portal y /punto. */
[data-con-ayuda] { cursor: help; -webkit-touch-callout: none; }
.ayuda-tip {
  position: fixed; z-index: 10000; max-width: min(280px, calc(100vw - 16px));
  padding: 8px 11px; border-radius: 7px;
  background: #2f3640; color: #fff;
  font: 500 12.5px/1.4 var(--fuente, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
  letter-spacing: 0; text-transform: none; text-align: left; white-space: normal;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  pointer-events: none; opacity: 0; transform: translateY(3px);
  transition: opacity .12s ease, transform .12s ease;
}
.ayuda-tip[data-lado="abajo"] { transform: translateY(-3px); }
.ayuda-tip--visible { opacity: 1; transform: none; }
.ayuda-tip::after {
  content: ''; position: absolute; left: var(--flecha, 50%); width: 8px; height: 8px;
  background: inherit; transform: translateX(-50%) rotate(45deg);
}
.ayuda-tip[data-lado="arriba"]::after { bottom: -4px; }
.ayuda-tip[data-lado="abajo"]::after { top: -4px; }
@media (prefers-reduced-motion: reduce) { .ayuda-tip { transition: none; transform: none; } }