/* =================== WEBINARS ===================
   Rejillas del shortcode [webinars …] (ver lib/webinars-html).

   Esta hoja la cargan la web, el panel Y el iframe del contenido migrado, que
   es otro documento sin las variables de globals.css: por eso cada color lleva
   su valor de respaldo. La copia al iframe la hace scripts/copy-vendor.mjs. */

.seom-webinars {
  margin: 32px 0;
}

.seom-webinars__lista {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.seom-webinars--tarjetas .seom-webinars__lista {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.seom-webinars--imagenes .seom-webinars__lista {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.seom-webinars--vacia p {
  padding: 24px;
  text-align: center;
  color: #6b7378;
  background: #f2f2f2;
}

/* ---------- filtro ---------- */

.seom-webinars__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.seom-webinars__pestanas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
}

.seom-webinars__pestanas label {
  padding: 6px 14px;
  border: 1px solid #d5dcdc;
  border-radius: 999px;
  background: #fff;
  color: #1f2d2b;
  font-size: 0.82rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.seom-webinars__pestanas label:hover {
  border-color: var(--color-primary, #007078);
  color: var(--color-primary, #007078);
}

.seom-webinars__radio:focus-visible + .seom-webinars__radio,
.seom-webinars__pestanas label:focus-visible {
  outline: 2px solid var(--color-primary, #007078);
}

/* ---------- tarjetas (ciclos) ----------
   Calcadas de las de la web antigua: franja de estado, fecha, título cortado
   con el completo al pasar el ratón y botón abajo. */

.seom-webinar-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 300px;
  padding: 26px 22px 22px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 24px rgb(0 0 0 / 8%);
  box-sizing: border-box;
}

.seom-webinar-tarjeta__estado {
  align-self: flex-start;
  margin: 0 0 16px -22px;
  padding: 6px 14px;
  background: #eef3f2;
  color: #1f2d2b;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.seom-webinar-tarjeta__estado--inscripcion {
  background: #0f6b63;
  color: #fff;
}

.seom-webinar-tarjeta__estado--proximamente {
  background: #fdf0e6;
  color: #9a4200;
}

.seom-webinar-tarjeta__fecha {
  margin-bottom: 10px;
  color: #6b7a77;
  font-size: 14px;
}

.seom-webinar-tarjeta__titulos {
  position: relative;
  margin-bottom: 22px;
}

.seom-webinar-tarjeta__titulo {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  color: #1f2d2b;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

/* El título completo, al pasar el ratón.

   Se pinta EXACTAMENTE encima del cortado —misma posición, mismo tamaño de
   letra, sin sombra ni margen—, así que lo que se ve es que el título sigue
   donde estaba y se alarga hacia abajo. Con un título que ya cabía, no cambia
   nada. (La primera versión copiaba la de la web antigua: letra más pequeña y
   una caja con sombra por encima, y parecía que la tarjeta daba un salto.) */
.seom-webinar-tarjeta__completo {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  padding-bottom: 8px;
  background: #fff;
  color: #1f2d2b;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.seom-webinar-tarjeta__titulos:hover .seom-webinar-tarjeta__completo {
  opacity: 1;
}

.seom-webinar-tarjeta__boton {
  align-self: flex-start;
  margin-top: auto;
  padding: 8px 16px;
  border: 1px solid #0f6b63;
  border-radius: 6px;
  color: #0f6b63;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.seom-webinar-tarjeta__boton:hover,
.seom-webinar-tarjeta__boton:focus-visible {
  background: #0f6b63;
  color: #fff;
}

/* ---------- con imagen (archivo) ---------- */

.seom-webinar-imagen__enlace {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  box-shadow: 0 5px 15px rgb(0 0 0 / 8%);
  color: #1d1d1d;
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.seom-webinar-imagen__enlace:hover,
.seom-webinar-imagen__enlace:focus-visible {
  box-shadow: 0 14px 25px rgb(0 0 0 / 16%);
  transform: translateY(-2px);
}

.seom-webinar-imagen__foto {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, #007078 0%, #4a8f8c 100%);
}

.seom-webinar-imagen__foto img {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
}

/* Un triángulo de «play» sobre las que tienen grabación. */
.seom-webinar-imagen__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgb(0 0 0 / 55%);
  transform: translate(-50%, -50%);
  transition: background 0.15s ease;
}

.seom-webinar-imagen__play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  border-width: 10px 0 10px 16px;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  transform: translate(-50%, -50%);
}

.seom-webinar-imagen__enlace:hover .seom-webinar-imagen__play {
  background: #ec6608;
}

.seom-webinar-imagen__categoria {
  padding: 12px 14px 0;
  color: #007078;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.seom-webinar-imagen__titulo {
  padding: 4px 14px 6px;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
}

.seom-webinar-imagen__fecha {
  margin-top: auto;
  padding: 0 14px 14px;
  color: #6b7378;
  font-size: 0.8rem;
}

@media (max-width: 960px) {
  .seom-webinars--imagenes .seom-webinars__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .seom-webinars--imagenes .seom-webinars__lista {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- ficha (/webinars/<slug>) ---------- */

.webinar-ficha {
  max-width: 900px;
}

.webinar-ficha__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 20px;
  color: #6b7378;
  font-size: 0.9rem;
}

.webinar-ficha__categoria {
  color: #007078;
  font-weight: 700;
}

.webinar-ficha__video {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 0 0 24px;
  background: #000;
}

.webinar-ficha__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.webinar-ficha__imagen {
  width: 100%;
  margin: 0 0 24px;
}

.webinar-ficha__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0;
}

.webinar-ficha__boton {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 6px;
  background: #0f6b63;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.webinar-ficha__boton:hover {
  background: #007078;
  color: #fff;
}

.webinar-ficha__etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.webinar-ficha__etiquetas li {
  padding: 3px 10px;
  border-radius: 999px;
  background: #f2f2f2;
  color: #6b7378;
  font-size: 0.78rem;
}

/* ---------- selector Básicos / Avanzados ----------
   El conmutador de las páginas de los ciclos de Cáncer Hereditario. Es HTML
   del artículo migrado (`nav.seom-ch-navegacion`), pero su CSS vivía en la
   plantilla de la web antigua y no llegó: sin esto se pintaba como dos enlaces
   sueltos en una línea. Copiado de seom.org tal cual. */

.seom-ch-navegacion {
  display: flex;
  align-items: stretch;
  gap: 6px;
  width: calc(100% - 40px);
  max-width: 720px;
  margin: 30px auto 45px;
  padding: 6px;
  border: 1px solid rgb(0 91 109 / 12%);
  border-radius: 12px;
  background: #f1f6f7;
  box-sizing: border-box;
}

.seom-ch-navegacion,
.seom-ch-navegacion * {
  box-sizing: border-box;
}

.seom-ch-opcion {
  display: flex;
  flex: 1 1 0%;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #005b6d !important;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.seom-ch-opcion:hover {
  border-color: rgb(0 91 109 / 16%);
  background: rgb(255 255 255 / 75%);
  transform: translateY(-1px);
}

.seom-ch-opcion-activa,
.seom-ch-opcion-activa:hover {
  border-color: #005b6d;
  background: #005b6d;
  box-shadow: 0 5px 12px rgb(0 91 109 / 16%);
  color: #fff !important;
  cursor: default;
  transform: none;
}

.seom-ch-opcion span {
  display: block;
}

.seom-ch-opcion small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.1;
  opacity: 0.78;
}

@media (max-width: 550px) {
  .seom-ch-navegacion {
    width: calc(100% - 24px);
    margin: 22px auto 32px;
    padding: 5px;
    gap: 5px;
  }

  .seom-ch-opcion {
    min-height: 46px;
    padding: 9px 8px;
    font-size: 13px;
  }

  .seom-ch-opcion small {
    font-size: 10px;
  }
}

/* ---------- banda «Básicos» / «Avanzados» ----------
   El rótulo gris a todo el ancho que va encima del conmutador. En YOOtheme era
   una sección `uk-section-muted` con un H1 centrado; el HTML de respaldo lo
   dejó en un `<div style="text-align:center"><span>Básicos</span></div>` sin
   clase propia, así que se localiza por su sitio: es el bloque que va justo
   antes del conmutador. Medidas de seom.org: fondo #f2f2f2, 40px arriba y
   abajo, 45px de letra en #008080.

   El fondo sale del contenedor de la página a todo el ancho de la ventana con
   `border-image` —una imagen de borde que se extiende 100vmax a cada lado sin
   ocupar sitio—, y no con `width: 100vw`, que abriría una barra de
   desplazamiento horizontal. Se probó antes con una sombra recortada con
   `clip-path` y Chrome dejaba sin pintar el lado izquierdo. */

div:has(+ div > .seom-ch-navegacion) {
  clear: both;
  width: 100%;
  margin: 40px 0 0;
  padding: 40px 0;
  border-image: conic-gradient(#f2f2f2 0 0) fill 0 / / 0 100vmax;
  color: #008080;
  font-size: 45px;
  font-weight: 400;
  line-height: 54px;
  text-align: center !important;
}

div:has(+ div > .seom-ch-navegacion) > span {
  color: #008080 !important;
  font-size: inherit !important;
}

@media (max-width: 640px) {
  div:has(+ div > .seom-ch-navegacion) {
    padding: 28px 0;
    font-size: 32px;
    line-height: 40px;
  }
}