/* Ventanas emergentes uniformes (20-oct-2026).
 *
 * Guía: la ventana «Using Statistical Clustering to Identify Superior Cultivars» (cple0): fondo gris
 * #353c3a que tapa toda la pantalla, la imagen centrada y la X blanca en círculo a su derecha (debajo en móvil).
 * Wix dejaba cada ventana distinta: paneles de 1186 px pegados a la izquierda que no cubrían la pantalla,
 * fondos verdes o grises, la imagen y la X a alturas distintas y X de 11 px en el móvil.
 *
 * Cómo funciona: el fondo de la ventana (#bgLayers_<id>) se fija a toda la pantalla; en las ventanas de imagen,
 * el panel de Wix (.wixui-lightbox) se vuelve transparente y deja pasar los clics (pulsar en el fondo cierra) y la
 * imagen y la X se colocan fijas respecto al centro de la pantalla; --lado es el lado de la imagen.
 * Las ventanas de texto (sin imagen, p. ej. el Resin Index) las centra Wix: sólo cambian el fondo, la tarjeta
 * (blanca) y el dibujo de la X. Su X no se mueve: es parte de la cuadrícula y moverla descoloca el texto.
 */
[data-alisos-popup] {
  --fondo: #353c3a;
  --lado: min(743px, calc(100vh - 96px), calc(100vw - 192px));
}

/* Fondo: opaco y a pantalla completa (todas) */
[data-alisos-popup] #popups-wrapper > div > div:first-child > [id^="bgLayers_"] {
  position: fixed !important;
  inset: 0 !important;
}
[data-alisos-popup] #popups-wrapper > div > div:first-child > [id^="bgLayers_"] > * {
  background: var(--fondo) !important;
  opacity: 1 !important;
}

/* ── Ventanas de imagen ─────────────────────────────────────────────────────────────── */

/* El panel de Wix no se ve ni recibe clics: lo que se ve es la imagen */
[data-alisos-popup]:has(.wixui-image) .wixui-lightbox {
  pointer-events: none !important;
}
[data-alisos-popup]:has(.wixui-image) .wixui-lightbox > [id^="bgLayers_"] {
  display: none !important;
}

/* La imagen, centrada en la pantalla */
[data-alisos-popup] .wixui-lightbox .wixui-image {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  width: var(--lado) !important;
  height: var(--lado) !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: auto !important;
}
[data-alisos-popup] .wixui-lightbox .wixui-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* La X: círculo blanco, a la derecha de la imagen y un poco por debajo de su borde superior */
[data-alisos-popup]:has(.wixui-image) [data-testid=popupCloseIconButtonRoot] {
  position: fixed !important;
  left: calc(50% + var(--lado) / 2 + 37px) !important;
  top: calc(50% - var(--lado) / 2 + 44px) !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  transform: none !important;
  cursor: pointer;
  pointer-events: auto !important;
}
[data-alisos-popup]:has(.wixui-image) [data-testid=popupCloseIconButtonRoot] > div,
[data-alisos-popup]:has(.wixui-image) [data-testid=popupCloseIconButtonRoot] svg {
  width: 100% !important;
  height: 100% !important;
}

/* ── Ventanas de texto ──────────────────────────────────────────────────────────────── */

/* Tarjeta blanca, como la imagen de la guía */
[data-alisos-popup]:not(:has(.wixui-image)) .wixui-lightbox > [id^="bgLayers_"] > * {
  background: #fff !important;
}
/* La X en el mismo círculo que las demás, dibujado encima sin cambiar su caja */
[data-alisos-popup]:not(:has(.wixui-image)) [data-testid=popupCloseIconButtonRoot] {
  position: relative;
  cursor: pointer;
}
[data-alisos-popup]:not(:has(.wixui-image)) [data-testid=popupCloseIconButtonRoot] svg {
  visibility: hidden !important;
}
[data-alisos-popup]:not(:has(.wixui-image)) [data-testid=popupCloseIconButtonRoot]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='10.6'/%3E%3Cpath stroke-width='2' stroke-linecap='round' d='M8.5 8.5l7 7M15.5 8.5l-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}

/* Móvil: la imagen casi a todo el ancho y la X debajo, centrada, como en el diseño móvil de Wix */
@media (max-width: 700px) {
  [data-alisos-popup] {
    --lado: min(calc(100vw - 40px), calc(100vh - 140px));
  }
  [data-alisos-popup]:has(.wixui-image) [data-testid=popupCloseIconButtonRoot] {
    left: calc(50% - 17px) !important;
    top: calc(50% + var(--lado) / 2 + 16px) !important;
    width: 34px !important;
    height: 34px !important;
  }
}

/* TEMPORAL (20-oct-2026, pedido de Santi): sin el botón «+» de «Our Genetic Collection» en la PORTADA mientras se
   cuadra: allí abre cpldr, que es otra cosa (una versión vieja del gráfico del Biobank, verde turquesa sobre fondo
   oscuro). En /research la misma tarjeta abre cpldu (la imagen ampliada) y está bien: ése se queda.
   Para volver a mostrarlo, borrar esta regla. */
[data-popupid="cpldr"] {
  display: none !important;
}

/* Careers: dos ofertas que en Wix tenían la imagen a opacidad 0 y quedaban como recuadros negros
   (Post-Harvest Specialist — Seattle; Genetic Data Analyst — Zürich). Se vuelven a ver (20-oct-2026). */
#comp-m20d24ek,
#comp-m20d24i82 {
  --fill-layer-image-opacity: 1 !important;
}
/* Genetic Data Analyst abre su ventana (cple4, copiada de la portada) */
#comp-m20d24i82[data-popupid] {
  cursor: pointer;
}