/* =========================================================
   EMM Plans – Fix visual (tema + LearnPress sidebar)
   ========================================================= */

/* 1) Redondear y recortar bien el contenedor superior de la sidebar (tu "course-sidebar-top") */
.course-sidebar-top,
.course-summary-sidebar__inner .course-sidebar-top{
  border-radius: 16px !important;
  overflow: hidden !important; /* clave para que el negro/imagen recorte con el radio */
}

/* 2) Eliminar “doble caja”: nuestra caja NO debe ser otro bloque blanco con sombra */
.course-summary-sidebar__inner .emm-plan-box{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;        /* deja respirar el contenedor padre */
  margin: 12px 0 0 0 !important;/* separacion limpia */
}

/* Si quieres que el fondo verde (course-sidebar-top) sea del mismo ancho y el contenido “pegado” */
.course-summary-sidebar__inner .course-sidebar-top{
  padding: 14px !important;
}

/* 3) Botón "Selecciona una opción" más pequeño (altura y tipografía) */
.course-summary-sidebar__inner .emm-dd-btn{
  padding: 8px 10px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
}

/* 4) Panel desplegable: fondo y contraste, para evitar texto blanco invisible */
.course-summary-sidebar__inner .emm-dd-panel{
  background: #fff !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
}

/* 5) Opciones: forzar color oscuro + fondo visible (tu tema las está heredando blancas) */
.course-summary-sidebar__inner .emm-dd-item{
  color: #111 !important;              /* clave: corrige “blanco sobre blanco” */
  background: transparent !important;
}

.course-summary-sidebar__inner .emm-dd-left,
.course-summary-sidebar__inner .emm-dd-right,
.course-summary-sidebar__inner .emm-dd-right *{
  color: #111 !important;              /* fuerza texto y <del>/<ins> */
}

.course-summary-sidebar__inner .emm-dd-item:hover{
  background: rgba(0,0,0,.06) !important;
}

/* 6) Compactar cada opción (menos “bloque”) */
.course-summary-sidebar__inner .emm-dd-item{
  padding: 8px 10px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
}
.course-summary-sidebar__inner .emm-dd-left{ font-weight: 700 !important; }
.course-summary-sidebar__inner .emm-dd-right{
  font-weight: 700 !important;
  white-space: nowrap !important;
}

/* 7) Precio tachado/oferta con look limpio */
.course-summary-sidebar__inner .emm-dd-right del{
  opacity: .55 !important;
  margin-right: 6px !important;
}
.course-summary-sidebar__inner .emm-dd-right ins{
  text-decoration: none !important;
}

/* 8) CTA “Reservar plaza” más compacto también */
.course-summary-sidebar__inner .emm-plan-cta{
  padding: 10px 12px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
}

/* 9) Si la cabecera negra de tu bloque (título) es un elemento aparte y quieres redondearlo */
.course-summary-sidebar__inner .emm-plan-title{
  border-radius: 12px !important;
  overflow: hidden !important;
}
/* Ocultar breadcrumbs LearnPress (tu caso: ul.learn-press-breadcrumb) */
body.learnpress-page ul.learn-press-breadcrumb,
body.learnpress ul.learn-press-breadcrumb,
body.lp-archive-courses ul.learn-press-breadcrumb,
body.single-lp_course ul.learn-press-breadcrumb,
ul.learn-press-breadcrumb{
  display: none !important;
}
/* =========================================================
   FIX: LearnPress sube la miniatura con margin negativo
   (por eso se “come” el espacio bajo la nota)
   ========================================================= */

.course-summary-sidebar__inner .course-sidebar-preview .media-preview{
  margin-top: 0 !important;   /* quita el -20px */
}

/* opcional: si también quieres quitar el empuje lateral */
.course-summary-sidebar__inner .course-sidebar-preview .media-preview{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Y ahora sí, separación real entre nota y miniatura */
.course-summary-sidebar__inner .emm-plan-note{
  margin-bottom: 22px !important;
}
/* =========================================================
   Redondear recuadro negro de cabecera del curso
   ========================================================= */

.lp-archive-courses .course-detail-info{
  border-radius: 20px !important;   /* ajusta a 16–24px si quieres */
  overflow: hidden !important;      /* CLAVE para que se vea el redondeo */
}

/* =========================================================
   Móvil: unificar márgenes laterales del hero negro
   ========================================================= */

@media (max-width: 768px){

  /* Asegura que el bloque negro no llegue a borde y quede uniforme */
  .lp-archive-courses .course-detail-info{
    margin-left: 12px !important;
    margin-right: 12px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  /* Evita que el contenedor padre añada padding “doble” en algunos casos */
  .lp-archive-courses{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* =========================================================
   Dropdown EMM: cerrado (blanco + texto oscuro)
   abierto (oscuro + texto blanco)
   ========================================================= */

/* Estado por defecto (cerrado): fondo claro + texto oscuro */
.course-summary-sidebar__inner .emm-dd-btn{
  background: #fff !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,.18) !important;
}

/* Asegurar que el texto interno/heredados no lo pisen */
.course-summary-sidebar__inner .emm-dd-btn,
.course-summary-sidebar__inner .emm-dd-btn *{
  color: #111 !important;
}

/* Cuando está abierto: fondo oscuro + texto blanco */
.course-summary-sidebar__inner .emm-dd-btn[aria-expanded="true"]{
  background: #3f3f46 !important; /* gris oscuro */
  color: #fff !important;
  border-color: rgba(0,0,0,.25) !important;
}

.course-summary-sidebar__inner .emm-dd-btn[aria-expanded="true"],
.course-summary-sidebar__inner .emm-dd-btn[aria-expanded="true"] *{
  color: #fff !important;
}

/* (Opcional) en focus/teclado, que se vea “activo” */
.course-summary-sidebar__inner .emm-dd-btn:focus-visible{
  outline: 2px solid rgba(0,0,0,.25) !important;
  outline-offset: 2px !important;
}