/* Cartelito de descripción propio (data-pista). Reemplaza al title del navegador. */

.pista {
  position: absolute; z-index: 200; max-width: 320px;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--fila); border: 1px solid var(--borde); border-radius: 10px;
  padding: 9px 12px; color: var(--texto); font-size: 13px; line-height: 1.45;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
  opacity: 0; pointer-events: none; transform: translateY(3px);
  transition: opacity .12s ease, transform .12s ease;
  white-space: pre-line;
}
.pista.visible { opacity: 1; transform: translateY(0); }
.pista strong { color: var(--acento); font-size: 13px; }
.pista span { color: color-mix(in srgb, var(--texto) 75%, var(--tenue) 25%); }

@media (prefers-reduced-motion: reduce) {
  .pista { transition: none; }
}