/* ==========================================================================
   SpanishAura — Tutor LMS
   Capa de override: no se toca ninguna plantilla del plugin.

   El color primario ya viene del brand color de los ajustes de Tutor
   (#a03b25), que alimenta --tutor-color-primary y la escala --tutor-brand-*.
   Aquí se remapea el resto de su paleta a nuestros tokens y se ajustan los
   radios, la tipografía y las superficies.
   ========================================================================== */

:root {
	--tutor-body-color: #1e1b18;
	--tutor-body-color-rgb: 30, 27, 24;
	--tutor-border-color: #e9e1dc;
	--tutor-color-secondary: #57423d;
	--tutor-color-subdued: #57423d;
	--tutor-color-hints: #8a726c;
	--tutor-color-muted: #8a726c;
	--tutor-color-gray: #f5ece7;
	--tutor-color-gray-10: #fbf2ed;
	--tutor-color-white: #ffffff;
	--tutor-color-success: #4f7a52;
	--tutor-color-warning: #785a00;
	--tutor-color-danger: #ba1a1a;
}

/* --- Tipografía ------------------------------------------------------------
   Tutor carga Inter; ya la desencolamos, así que aquí solo hay que asegurar
   que sus componentes hereden nuestras familias. */

.tutor-wrap,
.tutor-course-details-page,
.tutor-dashboard,
.tutor-lesson-sidebar,
[class*="tutor-"] {
	font-family: var(--sa-font-body);
}

.tutor-wrap h1, .tutor-wrap h2, .tutor-wrap h3,
.tutor-course-details-page h1,
.tutor-course-details-page h2,
.tutor-course-details-page h3,
.tutor-dashboard h1, .tutor-dashboard h2, .tutor-dashboard h3,
.tutor-course-name,
.tutor-fs-3, .tutor-fs-4, .tutor-fs-5 {
	font-family: var(--sa-font-serif);
	color: var(--sa-on-surface);
}

/* --- Botones ---------------------------------------------------------------
   Se declaran hover y focus explícitamente: GeneratePress estiliza button y
   sus estados desde su CSS dinámico con especificidad (0,1,1). */

.tutor-btn.tutor-btn-primary,
.tutor-btn-primary {
	background-color: transparent;
	background-image: var(--sa-grad-primary);
	border: none;
	border-radius: var(--sa-radius-full);
	box-shadow: var(--sa-shadow-lg);
	color: var(--sa-on-primary);
	font-weight: 700;
}

.tutor-btn.tutor-btn-primary:hover,
.tutor-btn.tutor-btn-primary:focus,
.tutor-btn-primary:hover,
.tutor-btn-primary:focus {
	background-color: transparent;
	background-image: var(--sa-grad-primary);
	color: var(--sa-on-primary);
	filter: brightness(1.1);
}

.tutor-btn.tutor-btn-outline-primary,
.tutor-btn-outline-primary {
	background-color: transparent;
	border-radius: var(--sa-radius-full);
	box-shadow: inset 0 0 0 2px var(--sa-primary);
	border-color: transparent;
	color: var(--sa-primary);
	font-weight: 700;
}

.tutor-btn.tutor-btn-outline-primary:hover,
.tutor-btn.tutor-btn-outline-primary:focus {
	background-color: var(--sa-primary);
	color: var(--sa-on-primary);
}

.tutor-btn.tutor-btn-secondary,
.tutor-btn-secondary {
	background-color: var(--sa-surface-container-highest);
	border: none;
	border-radius: var(--sa-radius-full);
	color: var(--sa-primary);
	font-weight: 700;
}

.tutor-btn.tutor-btn-secondary:hover,
.tutor-btn.tutor-btn-secondary:focus {
	background-color: var(--sa-surface-container-high);
	color: var(--sa-primary);
}

/* --- Tarjetas y superficies ------------------------------------------------- */

.tutor-card {
	background-color: var(--sa-surface-container-lowest);
	border: none;
	border-radius: var(--sa-radius-card);
	box-shadow: var(--sa-shadow-sm);
}

.tutor-card .tutor-card-body {
	padding: 1.25rem;
}

.tutor-course-card .tutor-course-name,
.tutor-card-title {
	font-family: var(--sa-font-body);
	font-size: 1rem;
	font-weight: 700;
}

.tutor-course-card img,
.tutor-card img {
	border-radius: var(--sa-radius) var(--sa-radius) 0 0;
}

/* --- Ficha de curso --------------------------------------------------------- */

.tutor-course-details-page {
	background-color: var(--sa-surface);
}

.tutor-course-details-page .tutor-course-header h1,
.tutor-course-details-title {
	font-size: var(--sa-fs-h1);
	line-height: var(--sa-lh-h1);
}

/* Tarjeta lateral de compra: es la que convierte, va sobre superficie clara. */
.tutor-course-sidebar-card,
.tutor-course-sidebar .tutor-card {
	background-color: var(--sa-surface-container-lowest);
	border: none;
	border-radius: var(--sa-radius-card);
	box-shadow: var(--sa-shadow-md);
}

.tutor-course-price,
.tutor-course-sidebar-card .tutor-fs-4 {
	color: var(--sa-on-surface);
	font-family: var(--sa-font-serif);
	font-weight: 700;
}

.tutor-course-sidebar-card del,
.tutor-course-price del {
	color: var(--sa-on-surface-variant);
	font-weight: 400;
	opacity: 0.6;
}

/* Currículo: acordeón de módulos. Separación por superficie, sin rejilla. */
.tutor-accordion-item,
.tutor-course-topic {
	margin-block-end: 0.5rem;
	background-color: var(--sa-surface-container-lowest);
	border: none;
	border-radius: var(--sa-radius);
	overflow: hidden;
}

.tutor-accordion-item-header {
	padding: 1rem 1.25rem;
	background-color: var(--sa-surface-container);
	border: none;
	color: var(--sa-on-surface);
	font-family: var(--sa-font-body);
	font-weight: 700;
}

.tutor-accordion-item-header:hover {
	color: var(--sa-primary);
}

.tutor-accordion-item-header.is-active {
	background-color: var(--sa-surface-container-high);
	color: var(--sa-primary);
}

.tutor-accordion-item-body {
	background-color: var(--sa-surface-container-lowest);
}

.tutor-course-content-list-item {
	border-block-end: 1px solid rgba(30, 27, 24, 0.06);
}

.tutor-course-content-list-item:last-child {
	border-block-end: none;
}

.tutor-course-content-list-item a {
	color: var(--sa-on-surface);
}

.tutor-course-content-list-item a:hover {
	color: var(--sa-primary);
}

/* --- Vista de lección -------------------------------------------------------- */

.tutor-lesson-sidebar,
.tutor-course-single-sidebar-wrapper {
	background-color: var(--sa-surface-container-low);
	border-inline-end: none;
}

.tutor-lesson-sidebar .tutor-topics-sidebar-header,
.tutor-course-topics-header {
	background-color: var(--sa-surface-container);
	border: none;
}

.tutor-lesson-wrapper,
.tutor-lesson-content {
	background-color: var(--sa-surface);
}

.tutor-lesson-content h1,
.tutor-lesson-content h2 {
	font-family: var(--sa-font-serif);
}

/* --- Dashboard del alumno -----------------------------------------------------

   Tutor 4.0 rediseñó el dashboard: monta `.tutor-dashboard-layout` como hijo
   directo de <body>, con su propia barra lateral y su propia cabecera, y se
   salta por completo el esqueleto del theme. No aparecen ni nuestra nav ni
   nuestro footer, y forzarlos exigiría sobrescribir plantillas del plugin,
   justo lo que la regla 2 prohíbe.

   El enfoque aquí es adoptar su estructura y vestirla con nuestros tokens. */

body.tutor-screen-frontend-dashboard {
	/* No hay nav fija en esta pantalla: el hueco reservado sobra. */
	padding-block-start: 0;
	background-color: var(--sa-surface);
}

.tutor-dashboard-layout {
	background-color: var(--sa-surface);
}

.tutor-dashboard-sidebar {
	background-color: var(--sa-surface-container-low);
	border-inline-end: none;
}

.tutor-dashboard-sidebar-logo {
	color: var(--sa-primary);
	font-family: var(--sa-font-serif);
	font-weight: 700;
}

.tutor-dashboard-sidebar-nav a {
	border-radius: var(--sa-radius-sm);
	color: var(--sa-on-surface-variant);
	font-weight: 500;
}

.tutor-dashboard-sidebar-nav a:hover {
	background-color: var(--sa-surface-container);
	color: var(--sa-primary);
}

.tutor-dashboard-sidebar-nav a.is-active,
.tutor-dashboard-sidebar-nav .is-active > a,
.tutor-dashboard-sidebar-nav li.active > a {
	background-color: var(--sa-primary);
	color: var(--sa-on-primary);
}

.tutor-dashboard-header {
	background-color: var(--sa-surface);
	border-block-end: 1px solid rgba(30, 27, 24, 0.06);
}

.tutor-dashboard-body,
.tutor-dashboard-main,
.tutor-dashboard-page {
	background-color: var(--sa-surface);
}

.tutor-dashboard-header-user-popover,
.tutor-dashboard-nav-mobile-more-popover {
	background-color: var(--sa-surface-container-lowest);
	border: none;
	border-radius: var(--sa-radius);
	box-shadow: var(--sa-shadow-lg);
}

.tutor-dashboard-nav-mobile {
	background-color: var(--sa-surface-container-low);
	border-block-start: 1px solid rgba(30, 27, 24, 0.06);
}

.tutor-avatar-initials {
	background-color: var(--sa-primary);
	color: var(--sa-on-primary);
}

.tutor-btn-ghost {
	color: var(--sa-on-surface-variant);
}

.tutor-btn-ghost:hover {
	background-color: var(--sa-surface-container);
	color: var(--sa-primary);
}

.tutor-table {
	background-color: var(--sa-surface-container-lowest);
	border: none;
	border-radius: var(--sa-radius-card);
	overflow: hidden;
}

.tutor-table thead th {
	background-color: var(--sa-surface-container);
	border: none;
	color: var(--sa-on-surface-variant);
	font-size: var(--sa-fs-xs);
	font-weight: 700;
	letter-spacing: var(--sa-tracking-label);
	text-transform: uppercase;
}

.tutor-table td {
	border-block-end: 1px solid rgba(30, 27, 24, 0.06);
}

.tutor-table tbody tr:last-child td {
	border-block-end: none;
}

/* --- Barras de progreso -------------------------------------------------------- */

.tutor-progress-bar,
.tutor-progress-value {
	border-radius: var(--sa-radius-full);
}

.tutor-progress-bar {
	background-color: var(--sa-surface-container-highest);
}

.tutor-progress-value {
	background-color: var(--sa-secondary);
}

/* --- Avisos --------------------------------------------------------------------- */

.tutor-alert {
	background-color: var(--sa-surface-container);
	border: none;
	border-inline-start: 4px solid var(--sa-primary);
	border-radius: var(--sa-radius);
	color: var(--sa-on-surface);
}

.tutor-alert.tutor-success {
	border-inline-start-color: #4f7a52;
}

.tutor-alert.tutor-danger {
	border-inline-start-color: var(--sa-error);
}

/* --- Campos de formulario -------------------------------------------------------- */

.tutor-form-control,
.tutor-form-select {
	background-color: var(--sa-surface-container-low);
	border: none;
	border-radius: var(--sa-radius-sm);
	color: var(--sa-on-surface);
}

.tutor-form-control:focus,
.tutor-form-select:focus {
	outline: none;
	box-shadow: var(--sa-focus-ring);
}