/* ==========================================================================
   Escuela Renacer - Fix Fondo Cursos (v1.1.2)
   Corrige el fondo transparente/superpuesto del popup de lecciones
   (Thim Elementor Kit / Eduma / LearnPress).

   IMPORTANTE: los selectores empiezan con "html body" a propósito.
   El tema aplica esta regla real sobre #popup-content:
     .demo-online-learning.course-item-popup.admin-bar
     .thim-ekit-course-items #popup-content { ... }
   Esa regla tiene especificidad (1 id, 3 clases). Para ganarle en la
   cascada (incluso usando !important en ambos lados) necesitamos una
   especificidad igual o mayor. "html body" + la clase + el id logra eso
   sin tener que adivinar ni copiar las clases exactas del body, que
   pueden cambiar (admin-bar solo aparece si estás logueado, por ejemplo).
   ========================================================================== */

/* 1) El overlay que cubre toda la pantalla detrás del popup debe ser
      100% sólido y cubrir todo el viewport, sin cortes en los bordes. */
html body .thim-ekit-course-items {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	background-color: rgba(20, 20, 20, 0.72) !important;
	z-index: 999998 !important;
}

/* En navegadores móviles (Chrome/Safari) la barra de direcciones de abajo
   se muestra/esconde dinámicamente. "100vh" mide el alto total de la
   pantalla como si esa barra no existiera, así que el contenedor queda
   más alto que el espacio realmente visible y el final del contenido
   queda tapado detrás de la barra. "100dvh" sí se ajusta en tiempo real
   al espacio visible. Se declara después de vh como mejora progresiva
   (fallback para navegadores viejos que no soportan dvh). */
@supports (height: 100dvh) {
	html body .thim-ekit-course-items {
		height: 100dvh !important;
	}
}

/* 2) El contenedor del contenido del popup (video + título + material):
      fondo sólido real + a pantalla completa, sin recortes ni transparencia. */
html body .thim-ekit-course-items #popup-content,
html body .thim-ekit-course-items .ekit-popup-content {
	background-color: #faf6f2 !important;
	background-image: none !important;
	position: relative !important;
	z-index: 999999 !important;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
	width: 100vw !important;
	max-width: 100vw !important;
	height: auto !important;
	max-height: 100vh !important;
	margin: 0 !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch !important;
	padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
	box-sizing: border-box !important;
}

@supports (height: 100dvh) {
	html body .thim-ekit-course-items #popup-content,
	html body .thim-ekit-course-items .ekit-popup-content {
		max-height: 100dvh !important;
	}
}

/* Aire extra al final del contenido real (después del último bloque
   de texto/botones), para que nunca quede pegado al borde inferior
   ni se vea "cortado" al hacer scroll hasta el final. */
html body .thim-ekit-course-items #popup-content > *:last-child {
	margin-bottom: 48px !important;
}

/* 3) Header y footer del popup también con fondo sólido. */
html body .thim-ekit-course-items .ekit-popup-header,
html body .thim-ekit-course-items .ekit-popup-footer {
	background-color: #faf6f2 !important;
	background-image: none !important;
	position: relative !important;
	z-index: 999999 !important;
}

/* 4) Evita que el body haga scroll por detrás mientras el popup está abierto,
      lo que también provoca que se vea contenido "cortado" al fondo. */
body.thim-ekit-course-items-open {
	overflow: hidden !important;
}

/* 5) Responsive: en pantallas de celular el título y el material quedaban
      amontonados sobre el fondo. Se reduce el tamaño de texto y se agrega
      aire para que todo se lea limpio sobre el fondo ya sólido. */
@media (max-width: 768px) {
	html body .thim-ekit-course-items #popup-content {
		padding-top: 16px !important;
		padding-right: 16px !important;
		padding-left: 16px !important;
		padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
	}
	html body .thim-ekit-course-items #popup-content h1,
	html body .thim-ekit-course-items #popup-content h2 {
		font-size: 22px !important;
		line-height: 1.3 !important;
	}
}

/* ==========================================================================
   Bloque de comentarios ("¿Dudas, reflexiones o comentarios?")
   Inyectado automáticamente al final de cada lección.
   ========================================================================== */
.er-lesson-comments-box {
	background: #f3e9ec;
	border-left: 4px solid #99729b;
	padding: 24px;
	border-radius: 8px;
	margin-top: 24px;
	font-family: 'Public Sans', sans-serif;
}

.er-lesson-comments-box .er-lcb-title {
	font-family: 'Fraunces', serif;
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 8px 0;
	color: #2b2b2b;
}

.er-lesson-comments-box .er-lcb-sub {
	margin: 0 0 20px 0;
	color: #555;
}

.er-lesson-comments-box .er-lcb-list .er-lcb-item {
	background: #ffffff;
	border-radius: 6px;
	padding: 14px 16px;
	margin-bottom: 10px;
}

.er-lesson-comments-box .er-lcb-list .er-lcb-loading {
	color: #999;
	font-size: 14px;
	list-style: none;
}

.er-lesson-comments-box .er-lcb-list .comment-author {
	font-weight: 600;
	font-size: 14px;
	color: #2b2b2b;
}

.er-lesson-comments-box .er-lcb-list .comment-meta {
	font-size: 12px;
	color: #999;
	margin-bottom: 6px;
}

.er-lesson-comments-box .er-lcb-item-content {
	font-size: 14px;
	color: #333;
}

.er-lesson-comments-box .er-lcb-form p {
	margin-bottom: 12px;
}

.er-lesson-comments-box .er-lcb-form input[type="text"],
.er-lesson-comments-box .er-lcb-form input[type="email"],
.er-lesson-comments-box .er-lcb-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #d9c9d1;
	border-radius: 6px;
	font-family: 'Public Sans', sans-serif;
	font-size: 14px;
	box-sizing: border-box;
	background: #ffffff;
}

.er-lesson-comments-box .er-lcb-form textarea {
	resize: vertical;
}

.er-lesson-comments-box .er-lcb-submit {
	display: inline-block;
	background: #99729b !important;
	color: #fff !important;
	padding: 12px 24px !important;
	border-radius: 6px !important;
	border: none !important;
	font-weight: 600 !important;
	cursor: pointer;
	font-family: 'Public Sans', sans-serif;
}

.er-lesson-comments-box .er-lcb-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.er-lesson-comments-box .er-lcb-status {
	margin-top: 10px;
	font-size: 14px;
}

.er-lesson-comments-box .er-lcb-status-ok {
	color: #3a7d44;
}

.er-lesson-comments-box .er-lcb-status-error {
	color: #b3413a;
}