/* =========================================================================
   OREM Campus — branding del Learning Mode de Sensei (lecciones/quizzes)
   Sustituye la paleta stock (menta #AFDBDA + fuentes de sistema) por el
   Brandbook 2026: Burgundy + Pearl, Playfair + Prompt.
   Scope: body.sensei-course-theme (el template que LM impone en lecciones).
   ========================================================================= */

body.sensei-course-theme {
	/* Variables que Learning Mode consume (varias versiones de nombre por compat) */
	--sensei-primary-color: #6B1D33;
	--sensei-primary-contrast-color: #FAF8F5;
	--sensei-button-background-color: #6B1D33;
	--sensei-button-text-color: #FAF8F5;
	--sensei-accent-color: #6B1D33;

	background: #FAF8F5 !important;
	color: #2B2B2B;
	font-family: 'Prompt', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
	font-weight: 300;
}

/* Tipografía */
body.sensei-course-theme h1,
body.sensei-course-theme h2 {
	font-family: 'Playfair Display', 'Times New Roman', serif !important;
	font-weight: 500;
	color: #6B1D33;
	line-height: 1.2;
}
body.sensei-course-theme h3,
body.sensei-course-theme h4 {
	font-family: 'Prompt', sans-serif !important;
	font-weight: 500;
	color: #2B2B2B;
}

/* Enlaces */
body.sensei-course-theme a { color: #6B1D33; }
body.sensei-course-theme a:hover { color: #862B45; }

/* Header del modo lección (barra superior con progreso) */
body.sensei-course-theme .sensei-course-theme__header {
	background: #FAF8F5;
	border-bottom: 1px solid #E8D8C5;
}

/* Barra de progreso del curso */
body.sensei-course-theme .sensei-course-theme-course-progress-bar {
	background: #EFE6DB !important;
	border-radius: 999px;
}
body.sensei-course-theme .sensei-course-theme-course-progress-bar-inner {
	background: #6B1D33 !important;
	border-radius: 999px;
}

/* Sidebar / temario */
body.sensei-course-theme .sensei-course-theme__sidebar {
	background: #FBF7F3;
	border-right: 1px solid #F1E8E0;
}
body.sensei-course-theme .sensei-course-theme-course-navigation .sensei-course-theme-course-navigation-module__title,
body.sensei-course-theme .sensei-course-theme-course-navigation h3 {
	font-family: 'Prompt', sans-serif !important;
	font-weight: 600;
	color: #2B2B2B;
}
body.sensei-course-theme .sensei-course-theme-course-navigation-lesson.status-completed .sensei-course-theme-course-navigation-lesson__link,
body.sensei-course-theme .sensei-course-theme-course-navigation-lesson.completed a { color: #5f5a56; }

/* Botones CTA (completar lección, prev/next, take course) — burgundy.
   ⚠️ NO usar el selector `button` a secas: pinta de burgundy los toggles del
   temario (colapsables de módulo) → barras de módulo ilegibles en móvil.
   Solo clases de botón REALES. */
body.sensei-course-theme .wp-element-button,
body.sensei-course-theme .wp-block-button__link,
body.sensei-course-theme .sensei-course-theme__button,
body.sensei-course-theme .sensei-course-theme__button.is-primary,
body.sensei-course-theme input[type="submit"] {
	background: #6B1D33 !important;
	border-color: #6B1D33 !important;
	color: #FAF8F5 !important;
	border-radius: 10px !important;
	font-family: 'Prompt', sans-serif !important;
	font-weight: 500 !important;
	transition: background .16s ease;
}
body.sensei-course-theme .wp-element-button:hover,
body.sensei-course-theme .wp-block-button__link:hover,
body.sensei-course-theme .sensei-course-theme__button:hover,
body.sensei-course-theme input[type="submit"]:hover {
	background: #862B45 !important;
	border-color: #862B45 !important;
}
/* Active (click) oscurece + hunde; disabled neutro — paridad con el ladder del storefront */
body.sensei-course-theme .wp-element-button:active,
body.sensei-course-theme .wp-block-button__link:active,
body.sensei-course-theme .sensei-course-theme__button:active,
body.sensei-course-theme input[type="submit"]:active {
	background: #4C1526 !important;
	border-color: #4C1526 !important;
	transform: translateY(1px);
}
body.sensei-course-theme .wp-element-button:disabled,
body.sensei-course-theme .sensei-course-theme__button:disabled,
body.sensei-course-theme input[type="submit"]:disabled {
	background: #E8D8C5 !important;
	border-color: #E8D8C5 !important;
	color: rgba(43, 43, 43, .5) !important;
	cursor: not-allowed;
}

/* Toggles del temario / navegación de módulos (NO son CTAs): transparentes y
   legibles. Antes el `button` amplio los pintaba burgundy → módulos ilegibles
   (esp. el menú "Contenido del curso" en móvil). */
body.sensei-course-theme .sensei-collapsible__toggle,
body.sensei-course-theme [class*="course-navigation-module"] button,
body.sensei-course-theme [class*="course-navigation-module"] .sensei-collapsible__toggle,
body.sensei-course-theme .sensei-lms-course-navigation-module__header,
body.sensei-course-theme .wp-block-sensei-lms-course-theme-lesson-module {
	background: transparent !important;
	color: #2B2B2B !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-family: 'Prompt', sans-serif !important;
	font-weight: 600 !important;
	transform: none !important;
}
body.sensei-course-theme [class*="course-navigation-module"] button *,
body.sensei-course-theme .sensei-lms-course-navigation-module__title,
body.sensei-course-theme .sensei-lms-course-navigation-module__title * { color: #2B2B2B !important; }
/* la flechita del colapsable en burgundy */
body.sensei-course-theme .sensei-collapsible__toggle svg,
body.sensei-course-theme [class*="course-navigation-module"] svg { fill: #6B1D33 !important; color: #6B1D33 !important; }

/* ============================================================
   "ESTÁS AQUÍ" — marca clara de la lección/módulo actual en el temario.
   Antes solo se ponía en negrita (imperceptible). Ahora: barra burgundy
   + fondo suave en la lección actual, y el módulo que la contiene resaltado.
   ============================================================ */
body.sensei-course-theme .sensei-lms-course-navigation-lesson.current-lesson {
	background: #F6EED9 !important;
	/* barra de acento como inset (NO border-left): no desplaza el texto ni se
	   desalinea con las otras filas. Una sola barra, sobre la propia lección. */
	box-shadow: inset 3px 0 0 #6B1D33 !important;
	border-left: 0 !important;
	border-radius: 0 8px 8px 0 !important;
	padding-top: 6px !important;
	padding-bottom: 6px !important;
}
body.sensei-course-theme .sensei-lms-course-navigation-lesson.current-lesson .sensei-lms-course-navigation-lesson__title,
body.sensei-course-theme .sensei-lms-course-navigation-lesson.current-lesson a {
	font-weight: 700 !important;
	color: #6B1D33 !important;
}
/* Badge sutil "Viendo" en la lección actual */
body.sensei-course-theme .sensei-lms-course-navigation-lesson.current-lesson .sensei-lms-course-navigation-lesson__title::after {
	content: "Viendo";
	display: inline-block;
	margin-left: 8px;
	background: #6B1D33;
	color: #FAF8F5;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .04em;
	padding: 2px 8px;
	border-radius: 999px;
	vertical-align: middle;
}
/* Módulo que contiene la lección actual → SOLO el título en burgundy (dónde
   estoy). Sin barra en el módulo: evita la doble barra desalineada (la barra
   la lleva la lección actual). */
body.sensei-course-theme .sensei-lms-course-navigation-module:has(.current-lesson) .sensei-lms-course-navigation-module__title,
body.sensei-course-theme .sensei-lms-course-navigation-module:has(.current-lesson) .sensei-lms-course-navigation-module__title * {
	color: #6B1D33 !important;
}

/* Botón secundario/outline conserva jerarquía */
body.sensei-course-theme .sensei-course-theme__button.is-secondary {
	background: transparent !important;
	color: #6B1D33 !important;
	border: 1px solid #E8D8C5 !important;
}
body.sensei-course-theme .sensei-course-theme__button.is-secondary:hover {
	background: #F6EED9 !important;
}

/* Aviso de acceso (lección bloqueada) */
body.sensei-course-theme .sensei-course-theme-lesson-actions,
body.sensei-course-theme .sensei-lms-notice,
body.sensei-course-theme .sensei-message {
	border-radius: 14px;
	border: 1px solid #E8D8C5;
	background: #FFFFFF;
}

/* Focus visible accesible */
body.sensei-course-theme :focus-visible {
	outline: 2px solid #6B1D33 !important;
	outline-offset: 2px;
}

/* =========================================================================
   REPRODUCTOR DE LECCIÓN (P3): notas privadas, autoplay "siguiente",
   "completar" prominente. Componentes nuevos SIN prefijo de body (con
   !important donde GeneratePress pisa inputs) para servir LM y clásico.
   ========================================================================= */

/* --- 9a. Notas privadas --- */
.orem-notes {
	margin: 30px 0 8px;
	padding: 20px 22px;
	background: #FBF7F3;
	border: 1px solid #E8D8C5;
	border-radius: 16px;
}
.orem-notes__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}
.orem-notes__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
	font-family: 'Prompt', sans-serif !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	color: #2B2B2B !important;
}
.orem-notes__title svg { color: #6B1D33; flex: none; }
.orem-notes__status {
	font-size: .8rem;
	color: #8a857f;
	min-height: 1em;
	transition: color .2s ease;
}
.orem-notes__area {
	width: 100% !important;
	box-sizing: border-box !important;
	min-height: 112px;
	resize: vertical;
	padding: 14px 16px !important;
	border: 1px solid #E3D6C6 !important;
	border-radius: 12px !important;
	background: #FFFDFB !important;
	color: #2B2B2B !important;
	font-family: 'Prompt', sans-serif !important;
	font-size: .95rem !important;
	line-height: 1.6 !important;
	box-shadow: none !important;
}
.orem-notes__area:focus {
	outline: none !important;
	border-color: #6B1D33 !important;
	box-shadow: 0 0 0 3px rgba(107, 29, 51, .15) !important;
}
.orem-notes__area::placeholder { color: #b3aca4; opacity: 1; }

/* --- 9b. Tarjeta "siguiente lección" sobre el video --- */
.orem-next-card {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 6;
	max-width: min(340px, 82%);
	padding: 14px 16px;
	background: rgba(23, 10, 13, .93);
	color: #FAF8F5;
	border-radius: 14px;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .42);
	animation: oremNextIn .28s ease both;
}
@keyframes oremNextIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.orem-next-card__k {
	margin: 0 0 10px !important;
	font-family: 'Prompt', sans-serif !important;
	font-size: .72rem !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #E8D8C5 !important;
}
.orem-next-card__row { display: flex; gap: 8px; flex-wrap: wrap; }
.orem-next-card__go,
.orem-next-card__cancel {
	padding: 9px 16px !important;
	border-radius: 10px !important;
	font-family: 'Prompt', sans-serif !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition: background .16s ease;
}
.orem-next-card__go { background: #FAF8F5 !important; color: #6B1D33 !important; border: 0 !important; }
.orem-next-card__go:hover { background: #ffffff !important; }
.orem-next-card__cancel { background: transparent !important; color: #E8D8C5 !important; border: 1px solid rgba(232, 216, 197, .42) !important; }
.orem-next-card__cancel:hover { background: rgba(255, 255, 255, .08) !important; }

/* --- 9b. Botón nativo "Siguiente" (nav prev/next) como CTA primaria --- */
body.sensei-course-theme .sensei-course-theme-prev-next-lesson-a[aria-label*="iguiente"]:not([data-disabled]) {
	background: #6B1D33 !important;
	border-radius: 10px;
	padding: 8px 14px;
	transition: background .16s ease;
}
body.sensei-course-theme .sensei-course-theme-prev-next-lesson-a[aria-label*="iguiente"]:not([data-disabled]):hover {
	background: #862B45 !important;
}
body.sensei-course-theme .sensei-course-theme-prev-next-lesson-a[aria-label*="iguiente"]:not([data-disabled]) *,
body.sensei-course-theme .sensei-course-theme-prev-next-lesson-a[aria-label*="iguiente"]:not([data-disabled]) .sensei-course-theme-prev-next-lesson-text {
	color: #FAF8F5 !important;
}
body.sensei-course-theme .sensei-course-theme-prev-next-lesson-a[aria-label*="iguiente"]:not([data-disabled]) svg { fill: #FAF8F5 !important; color: #FAF8F5 !important; }

/* --- 9c. "Completar lección": estado enviando --- */
.orem-notes ~ * .is-saving,
button.is-saving,
input.is-saving { opacity: .7 !important; pointer-events: none !important; }