/* Tarjeta contextual: solo al señalar o seleccionar. */
.ws-card {
  position: absolute; left: 0; top: 0; z-index: 5; width: max-content; max-width: min(300px, calc(100% - 24px));
  display: grid; grid-template-columns: 32px 1fr; gap: 3px 12px; padding: 11px 15px; border-radius: 13px;
  border: 0; color: #111;
  background: rgb(250 253 255 / 76%);
  box-shadow: 0 8px 24px rgb(25 40 55 / 12%);
  backdrop-filter: blur(20px) saturate(115%); -webkit-backdrop-filter: blur(20px) saturate(115%);
  opacity: 0; translate: 0 4px; transition: opacity .16s ease-out, translate .16s ease-out;
  pointer-events: auto;
}
.ws-card::after { content: ""; position: absolute; left: var(--anchor-x, 50%); top: 100%; height: calc(var(--card-gap, 16px) + 1px); width: 1px; background: linear-gradient(#8ad6ff, #49baff); pointer-events: none; }
.ws-card::before { content: ""; position: absolute; left: var(--anchor-x, 50%); top: calc(100% + var(--card-gap, 16px) - 2px); width: 8px; height: 8px; translate: -50% 0; border-radius: 50%; background: #effcff; border: 1px solid #6cccff; box-shadow: 0 0 0 4px rgb(66 175 255 / 17%), 0 0 12px #56c3ff; pointer-events: none; }
.ws-card[hidden] { display: none; }
.ws-card.is-visible { opacity: 1; translate: 0 0; }
.ws-card__icon { grid-column: 1; grid-row: 1 / span 5; align-self: center; width: 30px; height: 38px; color: #111; }
.ws-card > :not(.ws-card__icon) { grid-column: 2; }
.ws-card__title { font-size: 15px; line-height: 1.3; font-weight: 700; color: #111; }
.ws-card__text { font-size: 12px; line-height: 1.4; color: #111; max-width: 215px; }
.ws-card__soon, .ws-card__status { font-size: 12px; color: #111; }
.ws-card__action.btn { justify-self: start; margin-top: 5px; padding: 4px 0; min-height: 28px; border: 0; border-radius: 0; background: transparent; color: #111; font-size: 13px; text-decoration: none; box-shadow: none; }
.ws-card__action.btn:hover { color: #000; background: transparent; text-decoration: underline; }
.ws-card__action:focus-visible { outline: 2px solid #8bdcff; outline-offset: 4px; }
.ws-card [hidden] { display: none; }
.ws-card[data-kind="soon"]{grid-template-columns:1fr;}
.ws-card[data-kind="soon"] > :not(.ws-card__icon){grid-column:1;}
@media (prefers-reduced-motion: reduce) {
  .ws-card { transition: none; }
}
@media (max-width: 700px) {
  .ws-card { max-width: calc(100% - 24px); }
}