/* Club BPS — parte del set custom-club-* (CSS global del sitio).
   Cargado como archivo fisico via plg_system_clubbps (registerAndUseStyle + ?v=filemtime).
   Partido desde el antiguo custom-club.css monolitico; un archivo por BLOQUE. */

/* ============================================================
   BLOQUE 14 — Boton de cierre del popup (seccion .modal-popup)
   La home abre un modal de avisos (pagina SPPB 67) dentro de la
   seccion .sppb-section.modal-popup. Su boton de cierre venia como
   un icono suelto de 14x19px en gris rgba(121,121,125,.81) y sin
   fondo: se perdia contra el contenido del modal y ademas el area
   de click quedaba muy por debajo del minimo tactil de 44px.

   POR QUE se estilan el span interno y no el contenedor:
   SPPB genera el CSS del boton con selectores de ID
   (#sp-pagebuilder-popup-close-btn-67) y ademas mete !important en
   el :hover (color + background-color). Un selector de clase nuestro
   pierde esa pelea de especificidad, y clavar el ID aca ataria el
   estilo al id de la pagina del popup. El span .close-btn-icon, en
   cambio, no tiene NINGUNA regla generada apuntandole, asi que el
   circulo negro va ahi y el override queda estable ante cambios de
   configuracion del addon o de id de popup.

   El contenedor solo se neutraliza en lo que descuadra el tamano
   (transform: scale y padding), con !important — que gana sobre las
   reglas de ID porque esas van sin !important.
   ============================================================ */

/* Contenedor: sin escalados ni padding heredados del addon, para que
   la medida del circulo sea exactamente la que definimos abajo. */
[id^="sp-pagebuilder-popup-close-btn-"].sp-pagebuilder-popup-close-btn {
  transform: none !important;
  padding: 0 !important;
  background-color: transparent !important;
  border: 0 !important;
  line-height: 0 !important;
}

/* El circulo negro con el icono blanco vive en el span interno.

   display: flex !important — el span trae style="display: inline-block"
   INLINE desde el addon, y un estilo inline le gana a cualquier regla de
   hoja sin !important. Sin esto el span queda como block (el navegador
   "blockifica" al ser hijo de un contenedor flex), align-items y
   justify-content no hacen nada, y el glifo de Font Awesome se renderiza
   como texto: pegado a la izquierda y sobre una linea de 20px arriba de
   la caja de 44px, o sea descentrado en los dos ejes. */
.sp-pagebuilder-popup-close-btn .close-btn-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #000;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  /* Anillo claro + sombra: hace que el boton se recorte tanto sobre
     fondos claros como sobre imagenes oscuras del aviso. */
  border: 2px solid rgba(255, 255, 255, .92);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
  transition: background-color .2s ease, transform .2s ease;
}

.sp-pagebuilder-popup-close-btn:hover .close-btn-icon,
.sp-pagebuilder-popup-close-btn:focus-visible .close-btn-icon {
  background-color: var(--rojo-600, #E01225);
  color: #fff;
  transform: scale(1.08);
}

/* Foco visible por teclado: el contenedor es un div[role=button], asi
   que el anillo lo dibujamos nosotros. */
[id^="sp-pagebuilder-popup-close-btn-"].sp-pagebuilder-popup-close-btn:focus-visible {
  outline: 3px solid var(--azul-500, #2470C5);
  outline-offset: 3px;
  border-radius: 50%;
}

/* El span de texto del addon viene vacio; lo sacamos del flujo para que
   no sume ancho al lado del circulo. */
.sp-pagebuilder-popup-close-btn .close-btn-text:empty {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .sp-pagebuilder-popup-close-btn .close-btn-icon {
    transition: none;
  }
  .sp-pagebuilder-popup-close-btn:hover .close-btn-icon,
  .sp-pagebuilder-popup-close-btn:focus-visible .close-btn-icon {
    transform: none;
  }
}