/*
 * 1.9.5–1.9.6 — Aula del alumno.
 * Panel («Mi aula») y área de aprendizaje con un aire más elegante y tecnológico.
 * Usa los colores de marca del aula (variables --tutor-brand-*), así cada aula
 * de marca blanca conserva los suyos.
 */
:root {
	--mxl-brand: var(--tutor-brand-600, #6d28d9);
	--mxl-brand-2: var(--tutor-brand-500, #8b5cf6);
	--mxl-brand-deep: var(--tutor-brand-950, #160b33);
	--mxl-brand-ink: var(--tutor-brand-900, #2e1065);
	--mxl-brand-soft: var(--tutor-brand-100, #f3eefe);
	--mxl-brand-line: var(--tutor-brand-200, #e6dcfd);
	--mxl-grad: linear-gradient(135deg, var(--mxl-brand) 0%, var(--mxl-brand-2) 100%);
	--mxl-card: #fff;
	--mxl-line: rgba(30, 20, 70, .08);
	--mxl-shadow: 0 1px 2px rgba(20, 10, 50, .05), 0 12px 32px -18px rgba(30, 15, 80, .35);
}

/* ------------------------------------------------------------------ */
/* Panel del alumno («Mi aula»)                                        */
/* ------------------------------------------------------------------ */
/* Logo: un poco más abajo, sin chocar con el borde superior. */
.tutor-dashboard-sidebar-logo {
	height: auto !important;
	min-height: 88px;
	padding: 22px 32px 14px !important;
	overflow: visible !important;
}
.tutor-dashboard-sidebar-logo img {
	max-height: 58px !important;
	width: auto !important;
	max-width: 100% !important;
	object-fit: contain;
	display: block;
}
/* Tarjetas de cifras: 30 % más bajas, rectangulares y con los mismos bordes redondeados. */
.tutor-stat-card {
	height: 102px !important;
	min-height: 0 !important;
	padding: 14px 16px !important;
	justify-content: space-between !important;
}
.tutor-stat-card .tutor-stat-card-header { line-height: 1.25; }

@media (max-width: 767px) {
	.tutor-dashboard-sidebar-logo { min-height: 72px; padding: 16px 20px 10px !important; }
}

/* ------------------------------------------------------------------ */
/* Área de aprendizaje                                                 */
/* ------------------------------------------------------------------ */
.tutor-learning-area {
	--mxl-ab: 0px;                  /* barra de administración de WordPress */
	--mxl-head: var(--tutor-learning-header-height, 64px);
	--mxl-gap: 16px;
	--mxl-stage: 14px;              /* margen del escenario del video */
	--mxl-foot: 64px;               /* barra «Marcar como completado / Siguiente» */
	--mxl-reserve: calc(var(--mxl-ab) + var(--tutor-site-header-offset, 0px) + var(--mxl-head) + var(--mxl-gap) * 4 + var(--mxl-stage) * 2 + var(--mxl-foot) + 12px);
	background:
		radial-gradient(1200px 520px at 100% -10%, color-mix(in srgb, var(--mxl-brand) 9%, transparent), transparent 65%),
		radial-gradient(900px 480px at -10% 110%, color-mix(in srgb, var(--mxl-brand-2) 7%, transparent), transparent 60%),
		#f6f5fb !important;
	min-height: 100vh;
}
@media (min-width: 768px) {
	.tutor-learning-area.tutor-has-admin-bar { --mxl-ab: 32px; }
}

/* Barra superior: oscura, con brillo de marca. */
.tutor-learning-header {
	background: linear-gradient(105deg, var(--mxl-brand-deep) 0%, color-mix(in srgb, var(--mxl-brand-deep) 70%, var(--mxl-brand)) 60%, color-mix(in srgb, var(--mxl-brand-deep) 45%, var(--mxl-brand)) 100%) !important;
	box-shadow: 0 10px 30px -18px rgba(10, 5, 30, .8);
	padding: 8px 12px !important;
	min-height: var(--mxl-head);
	box-sizing: border-box;
	border-bottom: 0 !important;
}
.tutor-learning-header::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--mxl-brand-2) 80%, #fff), transparent);
	opacity: .7; pointer-events: none;
}
.tutor-learning-header-inner, .tutor-learning-header-content { background: transparent !important; border: 0 !important; }
.tutor-learning-header-title {
	color: #fff !important;
	font-weight: 700 !important;
	letter-spacing: -.01em;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tutor-learning-header-title > span { overflow: hidden; text-overflow: ellipsis; }
.tutor-learning-header .tutor-btn,
.tutor-learning-header-back,
.tutor-learning-header-toggle-mobile,
.tutor-learning-sidebar .tutor-learning-header-toggle-mobile {
	color: #fff !important;
	--tutor-icon-idle: #fff;
}
.tutor-learning-header .tutor-btn svg, .tutor-learning-header-back svg,
.tutor-learning-sidebar .tutor-learning-header-toggle-mobile svg { color: #fff !important; }
.tutor-learning-header-back {
	border-right: 1px solid rgba(255, 255, 255, .12) !important;
	margin-right: 4px;
}
.tutor-learning-header .tutor-btn-ghost:hover,
.tutor-learning-header-back:hover,
.tutor-learning-sidebar .tutor-learning-header-toggle-mobile .tutor-btn:hover { background: rgba(255, 255, 255, .1) !important; }
.tutor-learning-header .tutor-btn:not(.tutor-btn-icon):not(.tutor-learning-header-back) {
	border: 1px solid rgba(255, 255, 255, .28) !important;
	background: rgba(255, 255, 255, .08) !important;
	border-radius: 999px !important;
	color: #fff !important;
	backdrop-filter: blur(6px);
}
.tutor-learning-header .tutor-btn:not(.tutor-btn-icon):not(.tutor-learning-header-back):hover { background: rgba(255, 255, 255, .18) !important; }

/* Temario: tarjeta flotante. */
.tutor-learning-sidebar {
	padding: 14px 12px 64px !important;
	background: transparent !important;
}
.tutor-learning-sidebar-curriculum,
.tutor-learning-sidebar-pages {
	background: var(--mxl-card) !important;
	border: 1px solid var(--mxl-line) !important;
	border-radius: 18px !important;
	box-shadow: var(--mxl-shadow);
}
.tutor-learning-sidebar-curriculum { overflow: hidden; }
.tutor-learning-progress {
	padding: 18px 20px 16px !important;
	background: linear-gradient(180deg, var(--mxl-brand-soft), transparent);
	border-bottom: 1px solid var(--mxl-line);
}
.tutor-learning-progress-text { font-weight: 700 !important; color: var(--mxl-brand-ink) !important; }
.tutor-learning-progress .tutor-progress-bar {
	height: 8px !important;
	border-radius: 999px !important;
	background: color-mix(in srgb, var(--mxl-brand) 12%, #fff) !important;
	overflow: hidden;
}
.tutor-learning-progress .tutor-progress-bar-fill {
	border-radius: 999px !important;
	background: var(--mxl-grad) !important;
	box-shadow: 0 0 12px color-mix(in srgb, var(--mxl-brand-2) 70%, transparent);
}
.tutor-learning-nav { padding: 8px 8px 12px !important; }
.tutor-learning-nav-header { border-radius: 12px !important; padding: 10px !important; }
.tutor-learning-nav-header-title { font-weight: 700 !important; color: #1c1530 !important; }
.tutor-learning-nav-item {
	border-radius: 12px !important;
	padding: 10px 12px !important;
	margin: 2px 0 !important;
	transition: background-color .15s ease;
	position: relative;
}
.tutor-learning-nav-item:hover { background: var(--mxl-brand-soft) !important; }
.tutor-learning-nav-item.active {
	background: linear-gradient(90deg, color-mix(in srgb, var(--mxl-brand) 14%, #fff), color-mix(in srgb, var(--mxl-brand) 5%, #fff)) !important;
	color: var(--mxl-brand-ink) !important;
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--mxl-brand);
}
.tutor-learning-nav-item.active svg { color: var(--mxl-brand) !important; }
.tutor-learning-nav-body { border-color: var(--mxl-brand-line) !important; }

/* Temario desplegado en tableta y celular: panel completo con su propia barra,
   que tapa la barra de la lección (solo se ve el título del curso). */
@media (max-width: 992px) {
	.tutor-learning-sidebar {
		background: #f6f5fb !important;
		padding: 0 10px 16px !important;
		box-shadow: -20px 0 60px -30px rgba(10, 5, 30, .6);
	}
	.tutor-learning-sidebar > div:first-child {
		position: sticky;
		top: 0;
		z-index: 3;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		min-height: var(--mxl-head);
		margin: 0 -10px 4px;
		padding: 8px 12px 8px 18px !important;
		box-sizing: border-box;
		background: linear-gradient(105deg, var(--mxl-brand-deep) 0%, color-mix(in srgb, var(--mxl-brand-deep) 60%, var(--mxl-brand)) 100%);
		box-shadow: 0 10px 30px -18px rgba(10, 5, 30, .8);
	}
	.tutor-learning-sidebar > div:first-child .tutor-learning-header-title {
		font-size: 15px !important;
		line-height: 1.3 !important;
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.tutor-learning-sidebar:not(.is-open) { visibility: hidden; transition: transform .3s ease-in-out, visibility 0s linear .3s; }
	.tutor-learning-sidebar.is-open { visibility: visible; transition: transform .3s ease-in-out; }
}

/* Contenido. */
.tutor-learning-area .tutor-learning-area-content { padding: var(--mxl-gap) 20px 0 !important; }
@media (min-width: 768px) {
	/* La barra superior es fija: el contenido empieza debajo de ella, sin que lo tape. */
	.tutor-learning-area:not(.tutor-has-site-shell) .tutor-learning-area-content { padding-top: calc(var(--mxl-head) + var(--mxl-gap)) !important; }
}
@media (min-width: 1200px) {
	.tutor-learning-area-container { max-width: 1180px !important; }
}
@media (min-width: 1600px) {
	.tutor-learning-area-container { max-width: 1320px !important; }
}
.tutor-lesson-content {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
}
.tutor-lesson-content-tab {
	background: var(--mxl-card);
	border: 1px solid var(--mxl-line);
	border-radius: 22px;
	box-shadow: var(--mxl-shadow);
	overflow: hidden;
}
/* Sin recuadros vacíos debajo del video. */
.tutor-tabs-content:empty,
.tutor-lesson-content.mxl-bare .tutor-tabs-content { display: none !important; }
.tutor-lesson-content.mxl-bare .tutor-lesson-video-wrapper { border-bottom: 0 !important; }

/* Escenario del video: oscuro, y del tamaño justo para que el video y la barra
   inferior entren en una sola pantalla. */
.tutor-lesson-video-wrapper {
	background:
		radial-gradient(80% 120% at 50% 0%, color-mix(in srgb, var(--mxl-brand) 35%, transparent), transparent 70%),
		linear-gradient(180deg, var(--mxl-brand-deep), #07050f) !important;
	padding: var(--mxl-stage) !important;
	border-bottom: 0 !important;
}
.tutor-lesson-video-wrapper .tutor-video-player {
	width: min(100%, max(320px, calc((100dvh - var(--mxl-reserve)) * 16 / 9)));
	margin-inline: auto;
	border-radius: 14px;
	overflow: hidden;
	background: #000;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 70px -30px color-mix(in srgb, var(--mxl-brand-2) 80%, transparent);
}
.tutor-lesson-video-wrapper iframe,
.tutor-lesson-video-wrapper video { display: block; width: 100%; border: 0; }
.tutor-lesson-video-wrapper .plyr { border-radius: 14px; --plyr-color-main: var(--mxl-brand-2); }

/* Alta definición: el reproductor de YouTube elige la calidad según su tamaño;
   se dibuja al tamaño de la calidad elegida y se ajusta a la pantalla (--mxl-s). */
.tutor-video-player .plyr--youtube .plyr__video-embed { overflow: hidden; }
.tutor-video-player .plyr--youtube.plyr--full-ui .plyr__video-embed > .plyr__video-embed__container {
	width: calc(100% * var(--mxl-s, 1));
	padding-bottom: calc(240% * var(--mxl-s, 1));
	transform-origin: 0 0;
	transform: scale(calc(1 / var(--mxl-s, 1))) translateY(-38.28125%);
}

/* Selector de calidad dentro de la barra del reproductor. */
.mxl-q { position: relative; }
.mxl-q-btn {
	display: inline-flex; align-items: center; gap: 4px;
	background: transparent; border: 0; color: inherit; cursor: pointer;
	padding: 6px 8px; border-radius: 6px; font: 600 13px/1 system-ui, sans-serif;
}
.mxl-q-btn span, .mxl-q-opt span, .mxl-q-opt small, .mxl-q-title { font-size: 13px !important; line-height: 1.1 !important; }
.mxl-q-btn .mxl-q-badge { font-size: 9px !important; line-height: 1 !important; }
.mxl-q-opt small { font-size: 11px !important; white-space: nowrap; }
.mxl-q-title { font-size: 11px !important; }
.mxl-q-btn:hover, .mxl-q-btn[aria-expanded="true"] { background: var(--plyr-color-main, #8b5cf6); color: #fff; }
.mxl-q-badge {
	font-size: 9px; font-weight: 800; letter-spacing: .04em;
	background: #fff; color: #111; border-radius: 3px; padding: 2px 3px;
}
.mxl-q-menu {
	position: absolute; right: 0; bottom: calc(100% + 10px);
	min-width: 210px; padding: 6px; margin: 0; list-style: none;
	background: rgba(14, 10, 28, .94);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 12px; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .6);
	z-index: 5;
}
.mxl-q-menu[hidden] { display: none; }
.mxl-q-title { color: rgba(255, 255, 255, .55); font: 600 11px/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; padding: 8px 10px 6px; }
.mxl-q-opt {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
	background: transparent; border: 0; color: #fff; cursor: pointer; text-align: left;
	padding: 9px 10px; border-radius: 8px; font: 500 13px/1.2 system-ui, sans-serif;
}
.mxl-q-opt small { color: rgba(255, 255, 255, .5); font-size: 11px; }
.mxl-q-opt:hover { background: rgba(255, 255, 255, .08); }
.mxl-q-opt[aria-checked="true"] { color: #fff; background: color-mix(in srgb, var(--plyr-color-main, #8b5cf6) 45%, transparent); }

/* Aviso al terminar el video: lección completada y paso a la siguiente. */
.tutor-lesson-video-wrapper { position: relative; }
.mxl-done {
	position: absolute; inset: 0; z-index: 30;
	display: flex; align-items: center; justify-content: center; padding: 16px;
	background: radial-gradient(70% 70% at 50% 50%, rgba(20, 10, 45, .72), rgba(5, 3, 12, .9));
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	animation: mxl-fade .25s ease;
}
.mxl-done-card { text-align: center; color: #fff; max-width: 420px; }
.mxl-done-ring {
	width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--mxl-grad);
	box-shadow: 0 0 0 8px color-mix(in srgb, var(--mxl-brand-2) 25%, transparent), 0 12px 30px -8px color-mix(in srgb, var(--mxl-brand-2) 80%, transparent);
}
.mxl-done-ring svg { width: 30px; height: 30px; }
.mxl-done h4 { color: #fff !important; margin: 0 0 6px !important; font-size: 20px !important; font-weight: 800 !important; }
.mxl-done p { color: rgba(255, 255, 255, .78) !important; margin: 0 0 16px !important; font-size: 14px; }
.mxl-done-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.mxl-done-actions button {
	border-radius: 999px; padding: 10px 18px; font-weight: 700; font-size: 14px; cursor: pointer; border: 1px solid rgba(255, 255, 255, .28);
	background: rgba(255, 255, 255, .08); color: #fff;
}
.mxl-done-actions button.mxl-primary { background: #fff; color: var(--mxl-brand-ink); border-color: #fff; }
@keyframes mxl-fade { from { opacity: 0; } to { opacity: 1; } }

/* Pestañas (Resumen, Notas, etc.). */
.tutor-tabs-nav {
	gap: 6px !important;
	background: #fcfbff;
	padding: 10px 16px !important;
}
.tutor-tabs-tab {
	border-radius: 999px !important;
	padding: 8px 16px !important;
	border: 1px solid transparent !important;
	transition: background-color .15s ease;
}
.tutor-tabs-tab:hover { background: var(--mxl-brand-soft) !important; }
.tutor-tabs-tab.tutor-tabs-tab-active {
	background: var(--mxl-brand-soft) !important;
	border-color: var(--mxl-brand-line) !important;
	color: var(--mxl-brand-ink) !important;
	font-weight: 600;
}
.tutor-tabs-tab.tutor-tabs-tab-active::after { display: none !important; }
.tutor-lesson-wrapper { line-height: 1.7; color: #2a2540; }

/* Barra inferior: flotante y siempre a la vista. */
.tutor-learning-area-footer {
	position: sticky !important;
	bottom: 12px !important;
	z-index: 15;
	min-height: var(--mxl-foot);
	box-sizing: border-box;
	margin: var(--mxl-gap) 0 var(--mxl-gap) !important;
	background: rgba(255, 255, 255, .86) !important;
	-webkit-backdrop-filter: saturate(1.6) blur(14px);
	backdrop-filter: saturate(1.6) blur(14px);
	border: 1px solid var(--mxl-line) !important;
	border-radius: 18px !important;
	box-shadow: 0 18px 40px -24px rgba(30, 15, 80, .45) !important;
	padding: 8px 12px !important;
	align-items: center !important;
	justify-content: space-between !important;
}
.tutor-learning-area-footer > form { margin: 0 auto !important; }
.tutor-learning-area-footer .tutor-btn-ghost { border-radius: 999px !important; font-weight: 600; }
.tutor-learning-area-footer .tutor-btn-ghost:hover { background: var(--mxl-brand-soft) !important; color: var(--mxl-brand-ink) !important; }
.tutor-mark-as-complete-button,
.tutor-learning-area-footer .tutor-mark-as-complete-button {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	background: var(--mxl-grad) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 10px 22px !important;
	min-height: 44px;
	font-weight: 700 !important;
	white-space: nowrap;
	box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--mxl-brand) 90%, transparent);
	transition: transform .15s ease, filter .15s ease;
}
.tutor-mark-as-complete-button > span { width: auto !important; }
.tutor-mark-as-complete-button svg { width: 20px !important; height: 20px !important; flex: 0 0 20px; color: #fff !important; }
.tutor-mark-as-complete-button:not(.completed):hover { transform: translateY(-1px); filter: brightness(1.06); }
/* Lección ya completada: verde suave, sin el ícono gigante. */
.tutor-mark-as-complete-button.completed {
	background: #ecfdf3 !important;
	color: #067647 !important;
	border: 1px solid #abefc6 !important;
	box-shadow: none !important;
	cursor: default;
	opacity: 1 !important;
}
.tutor-mark-as-complete-button.completed svg { display: none !important; }
.tutor-mark-as-complete-button.completed::after {
	content: "";
	width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%;
	background: #12b76a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* Tableta. */
@media (max-width: 1199px) {
	.tutor-learning-area { --mxl-stage: 10px; --mxl-gap: 14px; }
	.tutor-lesson-content-tab { border-radius: 16px; }
	.tutor-lesson-video-wrapper .tutor-video-player, .tutor-lesson-video-wrapper .plyr { border-radius: 10px; }
	.tutor-learning-area .tutor-learning-area-content { padding-left: 14px !important; padding-right: 14px !important; }
}
@media (max-width: 767px) {
	.tutor-learning-area { --mxl-head: 56px; --mxl-gap: 12px; }
	.tutor-learning-header { min-height: 0; }
}
/* Celular: video un poco más abajo y con márgenes, bordes apenas redondeados,
   y los botones justo debajo (siempre a la vista, sin salirse de la pantalla). */
@media (max-width: 576px) {
	.tutor-learning-area { --mxl-stage: 0px; --mxl-foot: 60px; overflow-x: clip; }
	.tutor-learning-area .tutor-learning-area-content { padding: 12px 0 4px !important; }
	.tutor-lesson-content-tab {
		margin: 0 12px;
		border-radius: 10px;
		border: 0;
		background: transparent;
		box-shadow: 0 14px 30px -18px rgba(20, 10, 50, .55);
	}
	.tutor-lesson-video-wrapper { background: #000 !important; }
	.tutor-lesson-content.mxl-bare .tutor-lesson-content-tab { padding: 0 !important; }
	.tutor-lesson-content.mxl-bare .tutor-lesson-video-wrapper { margin: 0 !important; }
	.tutor-lesson-video-wrapper .tutor-video-player,
	.tutor-lesson-video-wrapper .plyr { border-radius: 10px; box-shadow: none; }
	.tutor-learning-area-footer {
		position: sticky !important;
		bottom: 8px !important;
		left: auto !important; right: auto !important;
		width: auto !important;
		max-width: calc(100vw - 24px);
		margin: 12px 12px !important;
		border-radius: 14px !important;
		padding: 8px !important;
		gap: 6px !important;
		flex-wrap: nowrap !important;
	}
	.tutor-learning-area-footer > a { flex: 0 0 auto; min-width: 0; }
	.tutor-learning-area-footer > form { flex: 0 1 auto; min-width: 0; }
	.tutor-learning-area-footer .tutor-btn-ghost { padding-left: 6px !important; padding-right: 6px !important; gap: 2px !important; font-size: 14px !important; }
	.tutor-mark-as-complete-button,
	.tutor-learning-area-footer .tutor-mark-as-complete-button { padding: 9px 14px !important; min-height: 40px; min-width: 0 !important; width: auto !important; gap: 6px; font-size: 14px !important; max-width: 100%; }
	.tutor-mark-as-complete-button svg { width: 18px !important; height: 18px !important; flex-basis: 18px; }
	.tutor-mark-as-complete-button.completed::after { width: 18px; height: 18px; flex-basis: 18px; background-size: 12px; }
	.tutor-tabs-nav { padding: 10px 12px !important; overflow-x: auto; flex-wrap: nowrap !important; }
	.tutor-tabs-tab { white-space: nowrap; }
}
/* Pantallas angostas: «Anterior» solo con su flecha; en las muy angostas, también «Siguiente». */
@media (max-width: 379px) {
	.tutor-learning-area-footer > a:first-child { font-size: 0 !important; padding: 8px !important; }
	.tutor-learning-area-footer > a:first-child svg { width: 20px; height: 20px; }
}
@media (max-width: 319px) {
	.tutor-learning-area-footer .tutor-btn-ghost { font-size: 0 !important; padding: 8px !important; }
}