/* === Popup overlay moderno (sin Bootstrap/jQuery) === */
#btcPopupOverlay{
  position: fixed;
  inset: 0;
  display: none;                 /* se activa por JS */
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(10, 14, 18, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2147483647;           /* por encima de SharePoint */
}

#btcPopupOverlay.btc-show{ display: flex; }

#btcPopupCard{
  position: relative;
  width: min(760px, 96vw);
  max-height: 92vh;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(0,0,0,.45);
  transform: translateY(10px) scale(.98);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
  background: #111;
}

#btcPopupOverlay.btc-show #btcPopupCard{
  transform: translateY(0) scale(1);
  opacity: 1;
}

#btcPopupClose{
  position: absolute;
  top: 12px;
  right: 12px;

  width: 32px;            /* ✅ más pequeño */
  height: 32px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;

  display: grid;
  place-items: center;

  /* ✅ menos invasivo + moderno */
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.92);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 8px 18px rgba(0,0,0,.22);
  opacity: .65;           /* ✅ discreto */
  transition: opacity .18s ease, transform .18s ease, background .18s ease, box-shadow .18s ease;
}

#btcPopupClose:hover{
  opacity: 1;
  background: rgba(255,255,255,.30);
  transform: scale(1.06);
  box-shadow: 0 12px 26px rgba(0,0,0,.26);
}

#btcPopupClose:active{
  transform: scale(.98);
}

/* ✅ En móvil, súbelo un poco para que sea fácil de tocar */
@media (max-width: 480px){
  #btcPopupClose{
    width: 38px;
    height: 38px;
    opacity: .85;
  }
}

#btcPopupLink{ display:block; text-decoration:none; }

#btcPopupImg{
  display:block;
  width:100%;
  height:auto;
}