/**
 * Menú del curso dentro de las lecciones.
 *
 * Sigue el lenguaje visual de las lecciones de Nova: tarjetas
 * translúcidas sobre fondo profundo, radios generosos, sombras largas,
 * acentos con degradado radial y transiciones suaves. Cada tema es su
 * propia tarjeta separada, plegable con animación.
 */

.dsr-lesson-layout {
	display: grid;
	grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
	gap: 26px;
	align-items: start;
	width: 100%;
}

/* ===== Marco de página (U4, 16-ago-2026) =====
   Con el temario activo, la página entera adopta el fondo de los tokens:
   un tema claro alrededor de una lección oscura se veía desprolijo. El
   color viene de --dsr-bg (paleta de Diseño), no va fijo aquí. !important
   porque el fondo del tema llega con más especificidad. */
body.dsr-lesson-page {
	background: var(--dsr-bg, #0D1117) !important;
}

body.dsr-lesson-page .entry-title,
body.dsr-lesson-page .page-title,
body.dsr-lesson-page h1 {
	color: var(--dsr-heading, #fff);
}

/* La firma "autor / fecha" del tema no aporta en una lección. */
body.dsr-lesson-page .entry-meta {
	display: none;
}

/* Alineación superior de las dos columnas: el embed de actividad trae
   margen vertical propio (28px) que descolgaba la lección respecto al
   menú. Dentro del marco, arriba va a ras. */
.dsr-lesson-content > .dsr-activity:first-child,
.dsr-lesson-content > p:first-child {
	margin-top: 0;
}

/* =========================================================
   Barra lateral
   ========================================================= */

/* UN solo panel, como el temario original: degradado de oscuro (arriba) a
   medio (abajo) derivado de la paleta, borde fino claro y radio amplio.
   Las piezas de dentro (cabecera, tema) son transparentes — el panel
   apilado sobre panel era el "fondo gris" que se veía sucio. */
/* Sin scroll interno (pedido 11-ago: "se ve feo"): el panel crece con su
   tema completo. Con el temario local a UN tema el contenido es corto, así
   que cabe; sigue pegado arriba mientras la lección hace scroll. */
.dsr-lesson-menu {
	position: sticky;
	top: 24px;
	padding: 22px;
	border-radius: 24px;
	border: 1px solid rgba(255, 255, 255, .14);
	background: linear-gradient(160deg, var(--dsr-menu-top, rgba(4, 16, 32, .98)), var(--dsr-menu-bottom, rgba(13, 86, 217, .92)));
	box-shadow: var(--dsr-shadow, 0 18px 45px rgba(0, 0, 0, .16));
}

/* ---------- Cabecera: curso + progreso ---------- */
.dsr-lesson-head {
	position: relative;
	margin-bottom: 18px;
	padding: 0 0 16px;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	background: transparent;
	box-shadow: none;
}

/* Marca de agua: la inicial de la academia asomando por la esquina (el
   detalle que hace caro el temario de Nova). Derivada del nombre en
   Diseño — cada academia trae la suya sin tocar nada. */
.dsr-lesson-mark {
	position: absolute;
	right: -14px;
	bottom: -44px;
	font-size: 150px;
	font-weight: 900;
	line-height: 1;
	color: rgba(255, 255, 255, .045);
	pointer-events: none;
	user-select: none;
}

.dsr-lesson-menu-course {
	display: block;
	text-decoration: none !important;
}

.dsr-lesson-menu-kicker {
	display: inline-flex;
	align-items: center;
	margin-bottom: 10px;
	padding: 6px 11px;
	border-radius: 999px;
	background: var(--dsr-primary-soft, rgba(118, 213, 255, .12));
	border: 1px solid var(--dsr-border, rgba(118, 213, 255, .3));
	color: var(--dsr-primary-2, #76D5FF);
	font-size: 11px;
	font-weight: 950;
	line-height: 1;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.dsr-lesson-menu-course strong {
	display: block;
	color: var(--dsr-heading, #fff);
	font-size: 18px;
	font-weight: 950;
	line-height: 1.22;
	letter-spacing: -.015em;
	transition: color .22s ease;
}

.dsr-lesson-menu-course:hover strong { color: var(--dsr-primary-2, #76D5FF); }

.dsr-lesson-progress { margin-top: 18px; }

.dsr-lesson-progress-label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 9px;
	color: var(--dsr-muted, #AFC7DC);
	font-size: 12px;
	font-weight: 850;
	letter-spacing: .01em;
}

.dsr-lesson-progress-label strong {
	color: var(--dsr-primary-2, #76D5FF);
	font-size: 15px;
	font-weight: 950;
}

.dsr-lesson-progress-bar {
	position: relative;
	height: 10px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--dsr-veil, rgba(255, 255, 255, .09));
	box-shadow: inset 0 0 0 1px var(--dsr-hairline, rgba(255, 255, 255, .12));
}

.dsr-lesson-progress-fill {
	position: relative;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--dsr-primary, #0F65FF), var(--dsr-primary-2, #76D5FF));
	box-shadow: 0 0 14px var(--dsr-primary-soft, rgba(118, 213, 255, .5));
	transition: width .6s cubic-bezier(.22, .61, .36, 1);
}

/* Brillo que recorre la barra: señal de progreso vivo. */
.dsr-lesson-progress-fill::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .32), transparent);
	animation: dsrShimmer 2.6s ease-in-out infinite;
}

@keyframes dsrShimmer {
	0%   { transform: translateX(-100%); }
	60%  { transform: translateX(100%); }
	100% { transform: translateX(100%); }
}

/* =========================================================
   El tema actual (desde 11-ago: uno solo, transparente en el panel)
   ========================================================= */

.dsr-lesson-section {
	margin: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.dsr-lesson-section-title {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 16px 18px;
	border: 0;
	background: transparent;
	color: var(--dsr-heading, #fff);
	font-size: 13.5px;
	font-weight: 900;
	line-height: 1.3;
	letter-spacing: -.005em;
	text-align: left;
	cursor: pointer;
	transition: background .22s ease, color .22s ease;
}

.dsr-lesson-section-title:hover { background: var(--dsr-veil-weak, rgba(255, 255, 255, .05)); }

/* Título estático (desde 11-ago el temario muestra SOLO el tema actual:
   nada que plegar). Filete al estilo del rótulo del temario original. */
.dsr-lesson-section-title.is-static {
	cursor: default;
	margin: 0 0 22px;
	padding: 2px 0 2px 14px;
	border-left: 4px solid var(--dsr-primary-2, #76D5FF);
	border-radius: 0;
	font-size: 14.5px;
}

.dsr-lesson-section-title.is-static:hover { background: transparent; }

.dsr-lesson-caret {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: var(--dsr-primary-soft, rgba(118, 213, 255, .12));
	color: var(--dsr-primary-2, #76D5FF);
	font-size: 11px;
	transition: transform .32s cubic-bezier(.22, .61, .36, 1), background .22s ease;
}

.dsr-lesson-section-title:hover .dsr-lesson-caret {
	background: var(--dsr-primary-soft, rgba(118, 213, 255, .22));
}

.dsr-lesson-section.is-collapsed .dsr-lesson-caret { transform: rotate(-90deg); }

/* Plegado animado real: grid 0fr→1fr anima la altura sin saltos. */
.dsr-lesson-list-wrap {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows .34s cubic-bezier(.22, .61, .36, 1);
}

.dsr-lesson-section.is-collapsed .dsr-lesson-list-wrap { grid-template-rows: 0fr; }

.dsr-lesson-list {
	margin: 0;
	padding: 0;
	list-style: none;
	min-height: 0;
}

/* ---------- Lecciones ---------- */
.dsr-lesson-item + .dsr-lesson-item { margin-top: 12px; }

.dsr-lesson-item a {
	position: relative;
	display: block;
	padding: 15px 15px 15px 58px;
	border-radius: 16px;
	color: var(--dsr-text, #D7E3EE) !important;
	background: var(--dsr-veil-weak, rgba(255, 255, 255, .075));
	border: 1px solid var(--dsr-hairline, rgba(255, 255, 255, .11));
	box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
	font-size: 13.5px;
	line-height: 1.32;
	font-weight: 650;
	text-decoration: none !important;
	transition: background .22s ease, transform .22s ease, color .22s ease, box-shadow .22s ease;
}

.dsr-lesson-item a:hover {
	transform: translateY(-2px);
	background: var(--dsr-veil-strong, rgba(255, 255, 255, .14));
	color: var(--dsr-heading, #fff) !important;
	box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
}



/* Lección abierta: barra dorada, fondo con degradado y punto vivo. */
.dsr-lesson-item.is-active a {
	background:
		linear-gradient(0deg, var(--dsr-primary-soft, rgba(118, 213, 255, .12)), var(--dsr-primary-soft, rgba(118, 213, 255, .12))),
		#FFFFFF;
	border-color: var(--dsr-border-strong, rgba(118, 213, 255, .75));
	color: var(--dsr-surface-lo, #041020) !important;
	font-weight: 950;
	box-shadow: 0 18px 34px var(--dsr-primary-soft, rgba(118, 213, 255, .28));
}

.dsr-lesson-item.is-active .dsr-lesson-num {
	background: var(--dsr-surface-lo, #041020);
	color: #fff;
	box-shadow: 0 10px 20px rgba(0, 0, 0, .35);
}



@keyframes dsrPulse {
	0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
	50%      { opacity: .45; transform: translateY(-50%) scale(.8); }
}

.dsr-lesson-num {
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	padding: 0 5px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--dsr-primary-2, #76D5FF), var(--dsr-primary, #0F65FF));
	color: var(--dsr-on-primary, #fff);
	font-size: 12.5px;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 10px 20px var(--dsr-primary-soft, rgba(118, 213, 255, .35));
}

/* Completada: el chip se pone verde (sin círculos extra — pedido 11-ago). */
/* Sin chip (la etiqueta era una palabra, no un número): el título recupera
   el hueco de 58 px que reservaba el chip, en vez de dejar un vacío. */
.dsr-lesson-item.is-nonum a { padding-left: 15px; }

.dsr-lesson-item.is-done .dsr-lesson-num {
	background: var(--dsr-ok-solid, #25D366);
	color: #06231A;
	box-shadow: 0 10px 20px var(--dsr-ok-soft, rgba(37, 211, 102, .35));
}

.dsr-lesson-main { min-width: 0; }

/* =========================================================
   Navegación anterior / siguiente
   ========================================================= */

/* Tres huecos FIJOS (11-ago): sin "anterior" (Bienvenida) el hueco queda
   vacío y nada se corre a la izquierda; el botón central siempre centrado. */
.dsr-lesson-nav {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	margin-top: 46px;
	padding-top: 28px;
	border-top: 1px solid var(--dsr-hairline, rgba(255, 255, 255, .13));
}

.dsr-lesson-nav-slot { min-width: 0; display: flex; }
.dsr-lesson-nav-slot.is-next-slot { justify-content: flex-end; }

.dsr-lesson-nav-slot.is-center-slot {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Las líneas decorativas con punto en el extremo, como el botón original. */
.dsr-lesson-nav-line {
	position: relative;
	width: clamp(30px, 6vw, 110px);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--dsr-primary-soft, rgba(118, 213, 255, .4)));
}

.dsr-lesson-nav-line:last-child {
	background: linear-gradient(90deg, var(--dsr-primary-soft, rgba(118, 213, 255, .4)), transparent);
}

.dsr-lesson-nav-line::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -2px;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	transform: translateY(-50%);
	background: var(--dsr-accent, #D8B46A);
	box-shadow: 0 0 8px var(--dsr-accent-soft, rgba(216, 180, 106, .5));
}

.dsr-lesson-nav-line:last-child::after { right: auto; left: -2px; }

.dsr-lesson-nav-link { flex: 1 1 auto; max-width: 420px; }
.dsr-lesson-nav-label .dsr-icon { width: 14px; height: 14px; }
.dsr-lesson-nav-link.is-prev .dsr-icon { transform: rotate(180deg); }
.dsr-lesson-nav-label { display: inline-flex; align-items: center; gap: 6px; }
.dsr-lesson-nav-link.is-next .dsr-lesson-nav-label { justify-content: flex-end; }

.dsr-lesson-nav-link {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 18px 22px;
	border-radius: 22px;
	border: 1px solid var(--dsr-hairline, rgba(255, 255, 255, .13));
	background: linear-gradient(170deg, var(--dsr-surface-hi, #0B3A72), var(--dsr-surface-lo, #041020));
	box-shadow: var(--dsr-shadow, 0 18px 50px rgba(0, 0, 0, .22));
	color: var(--dsr-text, #D7E3EE) !important;
	text-decoration: none !important;
	transition: transform .26s cubic-bezier(.22, .61, .36, 1), border-color .26s ease, box-shadow .26s ease;
}

.dsr-lesson-nav-link:hover {
	transform: translateY(-3px);
	border-color: var(--dsr-border-strong, rgba(118, 213, 255, .45));
	box-shadow: var(--dsr-shadow-lg, 0 24px 60px rgba(0, 0, 0, .32));
}

.dsr-lesson-nav-link.is-next { text-align: right; }

.dsr-lesson-nav-label {
	display: block;
	margin-bottom: 6px;
	color: var(--dsr-primary-2, #76D5FF);
	font-size: 11px;
	font-weight: 950;
	letter-spacing: .09em;
	text-transform: uppercase;
	transition: transform .26s ease;
}

.dsr-lesson-nav-link.is-prev:hover .dsr-lesson-nav-label { transform: translateX(-4px); }
.dsr-lesson-nav-link.is-next:hover .dsr-lesson-nav-label { transform: translateX(4px); }

.dsr-lesson-nav-title {
	display: block;
	color: var(--dsr-heading, #fff);
	font-size: 15px;
	font-weight: 900;
	line-height: 1.3;
	letter-spacing: -.01em;
}

/* Píldora dorada calcada del "Volver al Temario" original: degradado del
   ACENTO de la paleta con texto oscuro. En Nova sale dorada; en otra
   academia, del acento que tenga configurado. */
.dsr-lesson-nav-center {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: 999px;
	background: linear-gradient(160deg, var(--dsr-accent, #D8B46A), var(--dsr-accent, #D8B46A) 45%, rgba(0, 0, 0, .22)), var(--dsr-accent, #D8B46A);
	border: 1px solid var(--dsr-accent-border, rgba(216, 180, 106, .6));
	color: #131313 !important;
	font-size: 14.5px;
	font-weight: 900;
	text-decoration: none !important;
	white-space: nowrap;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .35);
	transition: transform .22s ease, box-shadow .22s ease;
}

.dsr-lesson-nav-center .dsr-icon { width: 17px; height: 17px; }

.dsr-lesson-nav-center:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 42px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .35);
}

/* =========================================================
   Móvil
   ========================================================= */

.dsr-lesson-menu-toggle { display: none; }

@media (max-width: 1024px) {
	.dsr-lesson-layout { grid-template-columns: 1fr; gap: 0; }

	.dsr-lesson-menu-toggle {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 16px;
		padding: 14px 22px;
		border: 1px solid var(--dsr-border-strong, rgba(118, 213, 255, .45));
		border-radius: 999px;
		background: linear-gradient(170deg, var(--dsr-surface-hi, #0B3A72), var(--dsr-surface-lo, #041020));
		box-shadow: var(--dsr-shadow, 0 14px 34px rgba(0, 0, 0, .26));
		color: var(--dsr-heading, #fff);
		font-size: 14px;
		font-weight: 950;
		cursor: pointer;
		transition: transform .22s ease;
	}

	.dsr-lesson-menu-toggle:hover { transform: translateY(-2px); }
	.dsr-lesson-menu-toggle[aria-expanded="true"] .dsr-lesson-toggle-icon { transform: rotate(90deg); }
	.dsr-lesson-toggle-icon { transition: transform .3s ease; }

	/* Cerrado de verdad: sin el padding y el borde del panel, que ahora
	   son de 22px/1px y dejarían una franja visible con max-height 0. */
	.dsr-lesson-menu {
		position: static;
		max-height: 0;
		overflow: hidden;
		margin-bottom: 0;
		padding-top: 0;
		padding-bottom: 0;
		border-width: 0;
		opacity: 0;
		transition: max-height .4s cubic-bezier(.22, .61, .36, 1), opacity .3s ease,
			margin-bottom .4s ease, padding .3s ease;
	}

	.dsr-lesson-menu.is-open {
		max-height: 2400px;
		margin-bottom: 26px;
		padding-top: 22px;
		padding-bottom: 22px;
		border-width: 1px;
		opacity: 1;
	}

	.dsr-lesson-nav { grid-template-columns: 1fr; }
	.dsr-lesson-nav-slot.is-next-slot { justify-content: flex-start; }
	.dsr-lesson-nav-slot.is-center-slot { justify-content: center; order: 3; }
	.dsr-lesson-nav-link { max-width: none; width: 100%; }
	.dsr-lesson-nav-link.is-next { text-align: left; }
	.dsr-lesson-nav-link.is-next .dsr-lesson-nav-label { justify-content: flex-start; }
	.dsr-lesson-nav-line { display: none; }
}

/* =========================================================
   Accesibilidad: quien pide menos movimiento, lo obtiene
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.dsr-lesson-layout *,
	.dsr-lesson-layout *::before,
	.dsr-lesson-layout *::after {
		animation: none !important;
		transition-duration: .01ms !important;
	}
}


/* ==========================================================================
   Convivencia con el temario viejo (WPCode, familia dtv-)

   Mientras el menú del plugin esté encendido, el temario pegado a mano en
   el contenido de las lecciones se oculta y su rejilla se colapsa a una
   columna: dos menús a la vez confundirían al alumno. Retirar el snippet
   de WPCode sigue siendo lo correcto el día de la limpieza; esto evita el
   choque entretanto.
   ========================================================================== */
body:has(.dsr-lesson-layout) .dtv-sidebar-temario { display: none !important; }

body:has(.dsr-lesson-layout) .wp-block-group.dtv-lesson-layout,
body:has(.dsr-lesson-layout) .dtv-lesson-layout {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ==========================================================================
   Pie de la lección (P0-2 del inventario, 11-ago-2026)

   PMPro Courses imprime su bloque `.pmpro.pmpro_courses` DESPUÉS de nuestro
   layout: el badge de tiempo (que el plugin inyecta ahí), el botón de
   completar y el enlace "Curso: …" quedaban sueltos sobre el fondo del tema
   — tres piezas de tres estilos. Se unifican en UNA barra oscura del
   sistema. Solo aplica cuando el menú del plugin está activo.
   ========================================================================== */

body:has(.dsr-lesson-layout) .pmpro.pmpro_courses {
	margin: 26px 0 0;
	padding: 18px 20px;
	border-radius: 20px;
	border: 1px solid var(--dsr-border, rgba(102, 201, 255, .22));
	background: linear-gradient(135deg, var(--dsr-panel-lo, rgba(4, 14, 32, .98)), var(--dsr-panel-hi, rgba(8, 38, 78, .94)));
	box-shadow: var(--dsr-shadow, 0 18px 45px rgba(0, 0, 0, .2)), inset 0 0 0 1px rgba(255, 255, 255, .035);
	color: var(--dsr-text, #D9E7F2);
}

body:has(.dsr-lesson-layout) .pmpro_courses_lesson-toggle {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 18px;
}

/* El badge de tiempo ya trae su estilo dorado (dsr-timetrack.css); sobre la
   barra oscura solo se asegura que no herede márgenes del tema. */
body:has(.dsr-lesson-layout) .pmpro_courses_lesson-toggle .dsr-time-badge {
	margin: 0;
}

/* El botón de completar, a la píldora del sistema. */
body:has(.dsr-lesson-layout) button.pmpro_courses_lesson_toggle,
body:has(.dsr-lesson-layout) .pmpro_btn.pmpro_courses_lesson_toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px !important;
	border-radius: 999px !important;
	border: 1px solid rgba(216, 244, 255, .36) !important;
	/* La parada clara termina FUERA del botón (170%): el degradado conserva
	   su dirección pero la zona visible nunca aclara tanto que la letra
	   blanca se pierda (detalle del cliente, 11-ago). */
	background: linear-gradient(135deg, var(--dsr-primary, #0F65FF), var(--dsr-primary-2, #76D5FF) 170%) !important;
	color: var(--dsr-on-primary, #fff) !important;
	font-size: 14px !important;
	font-weight: 900 !important;
	line-height: 1.1 !important;
	text-decoration: none !important;
	box-shadow: var(--dsr-shadow-sm, 0 10px 26px rgba(0, 0, 0, .28));
	transition: transform .2s ease, box-shadow .2s ease;
	cursor: pointer;
}

body:has(.dsr-lesson-layout) button.pmpro_courses_lesson_toggle:hover,
body:has(.dsr-lesson-layout) .pmpro_btn.pmpro_courses_lesson_toggle:hover {
	transform: translateY(-2px);
	box-shadow: var(--dsr-shadow, 0 18px 42px rgba(0, 0, 0, .34));
}

/* "Curso: …" — renglón secundario dentro de la misma barra. */
body:has(.dsr-lesson-layout) .pmpro_courses_lesson-back-to-course {
	margin: 12px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--dsr-hairline, rgba(255, 255, 255, .1));
	font-size: 13.5px;
	font-weight: 700;
	color: var(--dsr-muted, #AFC7DC);
}

body:has(.dsr-lesson-layout) .pmpro_courses_lesson-back-to-course a {
	color: var(--dsr-primary-2, #76D5FF) !important;
	text-decoration: none !important;
}

body:has(.dsr-lesson-layout) .pmpro_courses_lesson-back-to-course a:hover {
	text-decoration: underline !important;
	text-underline-offset: 3px;
}