/**
 * Datio sobre Tutor LMS — arranque de la capa estética (2026-08-25).
 *
 * No reescribe Tutor entero: usa los tokens que el propio plugin expone
 * (--tutor-color-*, --tutor-body-color, etc.) para acercarlo al lenguaje
 * visual del resto del sitio sin pelear contra su CSS pieza por pieza.
 * Los colores de marca (primario/hover/texto/borde/gris) ya se fijan por
 * código en inc/tutor-theme.php — esto es lo que esos tokens no cubren.
 */

.tutor-wrap,
.tutor-dashboard,
.tutor-course-archive,
body.single-courses,
body.single-lesson {
	font-family: var( --datio-font-display );
}

.tutor-btn {
	border-radius: 999px;
}

.tutor-card,
.tutor-course-single-content-wrap,
.tutor-p-30 {
	border-radius: 16px;
}

/* .tutor-card trae background-color:#fff a fuego en tutor.min.css (no
   usa la variable --tutor-color-white como el resto) — sin !important
   ese hardcode gana. */
.tutor-card,
.tutor-card-body,
.tutor-course-details-widget,
.tutor-course-content-list-item,
.tutor-accordion-item-header,
.tutor-accordion-item-body,
.tutor-course-single-sidebar-wrapper,
.tutor-course-single-info-card,
.tutor-course-filter-container {
	background-color: var( --datio-surface ) !important;
	border-color: var( --datio-border ) !important;
}

/* <select>/<input> nativos no heredan el fondo oscuro del sitio — el
   navegador les pone blanco por default salvo que se les diga lo
   contrario explícitamente. */
.tutor-form-control,
select.tutor-form-select {
	background-color: var( --datio-surface ) !important;
	border-color: var( --datio-border ) !important;
	color: var( --datio-text ) !important;
}

/* --tutor-color-white es EL fondo de prácticamente toda superficie de
   Tutor (tarjetas, inputs, selects, modales, dropdowns) — pisarla acá es
   lo que oscurece todo el plugin de una sola vez, en vez de perseguir
   cada componente blanco uno por uno. */
:root {
	--tutor-color-white: var( --datio-surface );
	--tutor-color-gray-10: var( --datio-surface-2 );
	--tutor-color-hints: var( --datio-text-dim );
	--tutor-color-muted: var( --datio-text-dim );
	--tutor-color-subdued: var( --datio-text-dim );
}

/* La misma variable se usa también como TEXTO sobre fondos de color
   (botón primario, avisos) — ahí hay que devolverle un tono oscuro para
   que no quede texto casi negro convertido en casi blanco sobre amarillo
   sin querer. Mismo criterio que el resto del sitio: texto oscuro sobre
   fondo de marca. */
.tutor-btn-primary,
.tutor-topbar-mark-btn,
.tutor-quiz-warning .flash-action button {
	color: #241900 !important;
}

/* Botón cerrar/volver — mudado acá desde cursos-datio.css: esa hoja solo
   carga en /cursos/ y la ficha propia de curso, pero el botón también se
   inyecta en las páginas nativas de Tutor (curso, lección, quiz), que
   cargan esta hoja sí o sí (ver datio_is_tutor_ui()). Con el admin bar
   activo (usuario logueado) se corre para no superponerse. */
.datio-cursos-cerrar {
	align-items: center;
	background: rgba( 255, 255, 255, 0.06 );
	border: 1px solid var( --datio-border );
	border-radius: 50%;
	color: var( --datio-text );
	cursor: pointer;
	display: flex;
	font-size: 20px;
	height: 40px;
	justify-content: center;
	position: fixed;
	right: 24px;
	text-decoration: none;
	top: 24px;
	transition: background 0.2s ease, border-color 0.2s ease;
	width: 40px;
	z-index: 100000;
}

.datio-cursos-cerrar:hover {
	background: rgba( 255, 255, 255, 0.14 );
	border-color: rgba( 255, 255, 255, 0.3 );
}

body.admin-bar .datio-cursos-cerrar {
	top: 56px;
}

@media ( max-width: 700px ) {
	.datio-cursos-cerrar {
		right: 16px;
		top: 16px;
	}

	body.admin-bar .datio-cursos-cerrar {
		top: 46px;
	}
}

/* El reproductor de lección/quiz ya usa las dos esquinas superiores para
   sus propios controles (volver al curso, alternar modo foco) — un
   círculo fijo ahí se superpone. Se convierte en una barra normal,
   arriba de todo lo demás (el hook que la imprime corre antes que
   cualquier otra cosa del template), en vez de flotar. */
body.single-lesson .datio-cursos-cerrar,
body.single-tutor_quiz .datio-cursos-cerrar,
body.single-tutor_assignments .datio-cursos-cerrar {
	background: var( --datio-bg );
	border: none;
	border-bottom: 1px solid var( --datio-border );
	border-radius: 0;
	font-size: 14px;
	height: auto;
	justify-content: flex-start;
	padding: 14px 24px;
	position: static;
	width: 100%;
}

body.single-lesson .datio-cursos-cerrar:before,
body.single-tutor_quiz .datio-cursos-cerrar:before,
body.single-tutor_assignments .datio-cursos-cerrar:before {
	content: '← Volver al inicio';
	font-size: 14px;
}

body.single-lesson .datio-cursos-cerrar span,
body.single-tutor_quiz .datio-cursos-cerrar span,
body.single-tutor_assignments .datio-cursos-cerrar span {
	display: none;
}

/* Tarjeta de recurso descargable (PDF de módulo) al final de una
   lección — reutiliza .tutor-card/.tutor-btn-primary/.tutor-icon-download
   nativos de Tutor, solo le suma el título y la descripción que esos
   componentes no traen de fábrica. */
.datio-recurso-descargable {
	margin-top: 32px;
}

.datio-recurso-titulo {
	color: var( --datio-text );
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 8px;
}

.datio-recurso-descripcion {
	color: var( --datio-text-dim );
	font-size: 14px;
	margin-bottom: 16px;
}