/* =========================================================================
   M2M LifterLMS Styles  ·  Restyle visual (solo CSS)
   Paleta Monkey2Master extraida del diseno (Figma).
   No modifica markup ni funcionalidad: solo colores, fondos, bordes,
   radios, sombras y transiciones sobre clases .llms-*.
   ========================================================================= */

:root {
	--m2m-bg:          #10182D; /* fondo principal navy            */
	--m2m-surface:     #151F3A; /* tarjetas / secciones            */
	--m2m-surface-2:   #131C36; /* inputs / sub-superficies        */
	--m2m-surface-3:   #192B5B; /* hover / acentos suaves          */
	--m2m-accent:      #3C81F6; /* azul de acento                  */
	--m2m-grad-from:   #2D5AD9; /* gradiente botones (inicio)      */
	--m2m-grad-to:     #99B4FF; /* gradiente botones (fin)         */
	--m2m-text:        #FFFFFF; /* texto principal                 */
	--m2m-text-muted:  #AFB8CD; /* texto secundario / metadatos    */
	--m2m-border:      rgba(255, 255, 255, 0.10);
	--m2m-border-soft: rgba(255, 255, 255, 0.06);
	--m2m-radius:      14px;
	--m2m-radius-sm:   10px;
	--m2m-shadow:      0 8px 24px rgba(8, 14, 30, 0.45);
	--m2m-maxw:        1240px; /* ancho maximo del contenido LifterLMS */
}

/* -------------------------------------------------------------------------
   0. LAYOUT / CONTENEDORES
   Contiene el ancho de las paginas que pinta LifterLMS (login, registro,
   dashboard, cuenta, checkout, catalogo) para que no atraviesen la pantalla.
   NO afecta paginas construidas con Elementor (solo toca wrappers .llms-*).
   ------------------------------------------------------------------------- */
.llms-student-dashboard,
.llms-checkout-wrapper,
.llms-my-account,
.llms-loop {
	max-width: var(--m2m-maxw);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}

/* Dashboard REAL (el que tiene nav de pestanas): full-width, nav a la izquierda.
   El login / cuenta sin nav se queda en el contenedor de 1240px de arriba. */
.llms-student-dashboard:has(.llms-sd-nav) {
	max-width: none;
	padding-left: 32px;
	padding-right: 32px;
}

/* Dashboard en columnas: separacion nav / contenido */
.llms-student-dashboard.llms-sd-layout-columns {
	gap: 32px;
}

/* Nav del dashboard pegado a la izquierda, pero con aire y STICKY al scroll */
@media (min-width: 900px) {
	.llms-student-dashboard.llms-sd-layout-columns .llms-sd-nav {
		position: sticky;
		top: 24px;
		align-self: flex-start; /* evita que la columna se estire a toda la altura */
	}
}

/* Respiro en moviles */
@media (max-width: 600px) {
	.llms-student-dashboard,
	.llms-checkout-wrapper,
	.llms-my-account,
	.llms-loop {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* -------------------------------------------------------------------------
   1. BOTONES
   ------------------------------------------------------------------------- */
.llms-button-action,
.llms-button-primary,
.llms-field-button {
	background: linear-gradient(90deg, var(--m2m-grad-from) 0%, var(--m2m-grad-to) 100%) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 12px 28px !important;
	font-weight: 600 !important;
	letter-spacing: .2px;
	box-shadow: 0 6px 18px rgba(45, 90, 217, 0.35);
	transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
	cursor: pointer;
}

.llms-button-action:hover,
.llms-button-primary:hover,
.llms-field-button:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(45, 90, 217, 0.45);
}

.llms-button-secondary {
	background: transparent !important;
	color: var(--m2m-text) !important;
	border: 1px solid var(--m2m-border) !important;
	border-radius: 999px !important;
	padding: 11px 26px !important;
	font-weight: 600 !important;
	transition: border-color .2s ease, background .2s ease;
}

.llms-button-secondary:hover {
	border-color: var(--m2m-accent) !important;
	background: rgba(60, 129, 246, 0.10) !important;
}

/* -------------------------------------------------------------------------
   2. PRICING TABLE / ACCESS PLANS  (tarjeta de precio - Imagen 1)
   ------------------------------------------------------------------------- */
.llms-access-plans {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}

.llms-access-plan {
	background: var(--m2m-surface) !important;
	border: 1px solid var(--m2m-border) !important;
	border-radius: var(--m2m-radius) !important;
	box-shadow: var(--m2m-shadow);
	color: var(--m2m-text) !important;
	overflow: hidden;
}

.llms-access-plan .llms-access-plan-title,
.llms-access-plan .llms-access-plan-price,
.llms-access-plan .llms-access-plan-content,
.llms-access-plan .stamp {
	color: var(--m2m-text) !important;
}

.llms-access-plan .llms-access-plan-price .lifterlms-price,
.llms-access-plan .llms-access-plan-price .price {
	color: var(--m2m-text) !important;
	font-weight: 700;
}

.llms-access-plan .llms-access-plan-description,
.llms-access-plan .llms-access-plan-restrictions,
.llms-access-plan .llms-access-plan-expiration,
.llms-access-plan .llms-access-plan-schedule,
.llms-access-plan .llms-access-plan-trial,
.llms-access-plan .llms-access-plan-sale-end {
	color: var(--m2m-text-muted) !important;
}

.llms-access-plan.featured,
.llms-access-plan .llms-access-plan-featured {
	background: linear-gradient(180deg, rgba(60, 129, 246, 0.18) 0%, rgba(60, 129, 246, 0) 100%) !important;
	color: var(--m2m-text) !important;
	border-bottom: 1px solid var(--m2m-border);
}

.llms-access-plan .llms-access-plan-footer {
	border-top: 1px solid var(--m2m-border-soft);
}

/* -------------------------------------------------------------------------
   3. STUDENT DASHBOARD  (/dashboard)
   ------------------------------------------------------------------------- */
.llms-student-dashboard {
	color: var(--m2m-text);
}

/* Navegacion lateral / tabs del dashboard
   (sin border ni background en el contenedor; cada link es una "pildora") */
.llms-sd-nav .llms-sd-items {
	border: none;
	background: transparent;
}

.llms-sd-nav .llms-sd-item .llms-sd-link {
	color: var(--m2m-text-muted) !important;
	border-radius: 10px;
	padding: 10px 10px !important; /* !important para ganar al core (padding:10px 0) */
	transition: background .15s ease, color .15s ease;
}

.llms-sd-nav .llms-sd-item .llms-sd-link:hover {
	color: var(--m2m-text) !important;
	background: var(--m2m-surface-3);
}

.llms-sd-nav .llms-sd-item.current .llms-sd-link,
.llms-sd-nav .llms-sd-item.llms-active .llms-sd-link {
	color: #fff !important;
	background: linear-gradient(90deg, var(--m2m-grad-from), var(--m2m-grad-to));
}

/* Secciones del dashboard */
.llms-sd-section {
	background: var(--m2m-surface);
	border: 1px solid var(--m2m-border);
	border-radius: var(--m2m-radius);
	padding: 22px;
	margin-bottom: 20px;
	box-shadow: var(--m2m-shadow);
}

.llms-sd-section-title,
.llms-sd-section .llms-sd-section-title {
	color: var(--m2m-text) !important;
	border-bottom: 1px solid var(--m2m-border);
	padding-bottom: 10px;
}

.llms-sd-section-footer a {
	color: var(--m2m-accent) !important;
}

/* Tarjetas de items (cursos, ordenes, favoritos) */
.llms-sd-item,
.llms-order-item {
	background: var(--m2m-surface-2);
	border: 1px solid var(--m2m-border);
	border-radius: var(--m2m-radius-sm);
}

/* -------------------------------------------------------------------------
   4. CHECKOUT / CARRITO  (pagina de compra)
   ------------------------------------------------------------------------- */
.llms-checkout-wrapper,
.llms-checkout {
	color: var(--m2m-text);
}

.llms-checkout-section {
	background: var(--m2m-surface) !important;
	border: 1px solid var(--m2m-border) !important;
	border-radius: var(--m2m-radius) !important;
	box-shadow: var(--m2m-shadow);
	overflow: hidden;
}

.llms-checkout-section .llms-form-heading,
.llms-checkout .llms-form-heading {
	color: var(--m2m-text) !important;
	border-bottom: 1px solid var(--m2m-border);
}

.llms-checkout-section-content {
	color: var(--m2m-text);
}

/* Resumen de la orden */
.llms-order-summary {
	background: var(--m2m-surface-2) !important;
	border: 1px solid var(--m2m-border) !important;
	border-radius: var(--m2m-radius-sm) !important;
	color: var(--m2m-text) !important;
}

.llms-order-summary .llms-label,
.llms-pricing,
.llms-pricing .llms-price {
	color: var(--m2m-text) !important;
}

/* Pasarelas de pago */
.llms-payment-gateways .llms-payment-gateway {
	background: var(--m2m-surface-2) !important;
	border: 1px solid var(--m2m-border) !important;
	border-radius: var(--m2m-radius-sm) !important;
	transition: border-color .2s ease;
}

.llms-payment-gateways .llms-payment-gateway.is-selected,
.llms-payment-gateways .llms-payment-gateway:hover {
	border-color: var(--m2m-accent) !important;
}

.llms-gateway-title {
	color: var(--m2m-text) !important;
	font-weight: 600;
}

.llms-gateway-description {
	color: var(--m2m-text-muted) !important;
}

/* Cupon */
.llms-coupon-wrapper {
	background: var(--m2m-surface-2);
	border: 1px solid var(--m2m-border);
	border-radius: var(--m2m-radius-sm);
}

/* -------------------------------------------------------------------------
   5. FORMULARIOS / INPUTS  (login, registro, cuenta, checkout)
   ------------------------------------------------------------------------- */
.llms-form-fields .llms-form-field input[type="text"],
.llms-form-fields .llms-form-field input[type="email"],
.llms-form-fields .llms-form-field input[type="password"],
.llms-form-fields .llms-form-field input[type="tel"],
.llms-form-fields .llms-form-field input[type="number"],
.llms-form-fields .llms-form-field input[type="url"],
.llms-form-fields .llms-form-field select,
.llms-form-fields .llms-form-field textarea,
.llms-coupon-entry input[type="text"] {
	background: var(--m2m-surface-2) !important;
	border: 1px solid var(--m2m-border) !important;
	border-radius: var(--m2m-radius-sm) !important;
	color: var(--m2m-text) !important;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.llms-form-fields .llms-form-field input:focus,
.llms-form-fields .llms-form-field select:focus,
.llms-form-fields .llms-form-field textarea:focus {
	border-color: var(--m2m-accent) !important;
	box-shadow: 0 0 0 3px rgba(60, 129, 246, 0.25) !important;
	outline: none !important;
}

.llms-form-fields .llms-form-field input::placeholder,
.llms-form-fields .llms-form-field textarea::placeholder {
	color: rgba(175, 184, 205, 0.6);
}

.llms-form-field .llms-label,
.llms-form-heading,
.llms-label {
	color: var(--m2m-text-muted) !important;
}

.llms-form-field .llms-is-required {
	color: var(--m2m-accent) !important;
}

/* -------------------------------------------------------------------------
   6. CATALOGO / LOOP DE CURSOS
   ------------------------------------------------------------------------- */
.llms-loop .llms-loop-item {
	background: var(--m2m-surface) !important;
	border: 1px solid var(--m2m-border) !important;
	border-radius: var(--m2m-radius) !important;
	box-shadow: var(--m2m-shadow);
	overflow: hidden;
	transition: transform .2s ease, border-color .2s ease;
}

.llms-loop .llms-loop-item:hover {
	transform: translateY(-3px);
	border-color: var(--m2m-accent) !important;
}

.llms-loop-item-content {
	color: var(--m2m-text);
	padding: 18px;
}

.llms-loop-title,
.llms-loop-title a {
	color: var(--m2m-text) !important;
}

.llms-loop-item .llms-meta,
.llms-loop-item .llms-enroll-status,
.llms-loop-item .llms-enroll-date {
	color: var(--m2m-text-muted) !important;
}

.llms-loop-item .llms-featured-pricing {
	color: var(--m2m-accent) !important;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   7. CURSO / LECCION  (syllabus, progreso, meta, video)
   ------------------------------------------------------------------------- */
.llms-syllabus-wrapper {
	background: var(--m2m-surface);
	border: 1px solid var(--m2m-border);
	border-radius: var(--m2m-radius);
	padding: 8px;
	box-shadow: var(--m2m-shadow);
}

.llms-syllabus-wrapper .llms-section-title,
.llms-course-outline .llms-section-title {
	color: var(--m2m-text) !important;
}

.llms-lesson-link {
	background: var(--m2m-surface-2) !important;
	border: 1px solid var(--m2m-border-soft) !important;
	border-radius: var(--m2m-radius-sm) !important;
	color: var(--m2m-text) !important;
	transition: border-color .2s ease, background .2s ease;
}

.llms-lesson-link:hover {
	border-color: var(--m2m-accent) !important;
	background: var(--m2m-surface-3) !important;
}

.llms-lesson-title {
	color: var(--m2m-text) !important;
}

.llms-lesson-excerpt,
.llms-lesson-meta,
.llms-lesson-counter,
.llms-meta-info,
.llms-meta {
	color: var(--m2m-text-muted) !important;
}

/* Barra de progreso */
.llms-progress .llms-progress-bar {
	background: var(--m2m-surface-3) !important;
	border-radius: 999px !important;
	overflow: hidden;
}

.llms-progress .llms-progress-bar .progress-bar-complete,
.llms-progress .llms-progress-bar > div {
	background: linear-gradient(90deg, var(--m2m-grad-from), var(--m2m-grad-to)) !important;
}

/* Video */
.llms-video-wrapper,
.llms-audio-wrapper {
	border-radius: var(--m2m-radius) !important;
	overflow: hidden;
}

/* Navegacion entre lecciones */
.llms-course-navigation .llms-prev-lesson,
.llms-course-navigation .llms-next-lesson,
.llms-back-to-course {
	color: var(--m2m-text) !important;
	background: var(--m2m-surface-2);
	border: 1px solid var(--m2m-border);
	border-radius: var(--m2m-radius-sm);
	transition: border-color .2s ease;
}

.llms-course-navigation .llms-prev-lesson:hover,
.llms-course-navigation .llms-next-lesson:hover,
.llms-back-to-course:hover {
	border-color: var(--m2m-accent) !important;
}

/* Instructor / author */
.llms-author,
.llms-instructor-info {
	background: var(--m2m-surface);
	border: 1px solid var(--m2m-border);
	border-radius: var(--m2m-radius);
	color: var(--m2m-text);
}

/* -------------------------------------------------------------------------
   8. TABLAS  (ordenes, calificaciones, notificaciones)
   ------------------------------------------------------------------------- */
.llms-table {
	background: var(--m2m-surface-2) !important;
	border: 1px solid var(--m2m-border) !important;
	border-radius: var(--m2m-radius-sm) !important;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	color: var(--m2m-text);
}

.llms-table thead th {
	background: var(--m2m-surface-3) !important;
	color: var(--m2m-text) !important;
	border-bottom: 1px solid var(--m2m-border) !important;
}

.llms-table tbody td {
	color: var(--m2m-text) !important;
	border-bottom: 1px solid var(--m2m-border-soft) !important;
}

.llms-table tbody tr:hover td {
	background: rgba(60, 129, 246, 0.06) !important;
}

.llms-table a {
	color: var(--m2m-accent) !important;
}

/* -------------------------------------------------------------------------
   9. NOTICES / MENSAJES
   ------------------------------------------------------------------------- */
.llms-notice {
	background: var(--m2m-surface) !important;
	color: var(--m2m-text) !important;
	border: 1px solid var(--m2m-border) !important;
	border-left: 4px solid var(--m2m-accent) !important;
	border-radius: var(--m2m-radius-sm) !important;
}

.llms-notice.llms-error {
	border-left-color: #e5484d !important;
	background: rgba(229, 72, 77, 0.10) !important;
}

.llms-notice.llms-success {
	border-left-color: #30a46c !important;
	background: rgba(48, 164, 108, 0.10) !important;
}

/* -------------------------------------------------------------------------
   10. PAGINACION
   ------------------------------------------------------------------------- */
.llms-pagination .page-numbers {
	background: var(--m2m-surface-2);
	border: 1px solid var(--m2m-border);
	color: var(--m2m-text-muted);
	border-radius: var(--m2m-radius-sm);
	transition: border-color .2s ease, color .2s ease;
}

.llms-pagination .page-numbers:hover,
.llms-pagination .page-numbers.current {
	color: #fff;
	border-color: var(--m2m-accent);
	background: linear-gradient(90deg, var(--m2m-grad-from), var(--m2m-grad-to));
}