/* PRIMARIO #0068A7 SECUNDARIO #68c4e0 */
/* 1. Estilos Base para Botones de LearnPress */
button.lp-button.submit-quiz,
button.lp-button.completed,
button.lp-button.start,
button.lp-button.review-quiz,
button#button-submit-quiz {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0068A7 !important; /* Color azul principal */
    color: #ffffff !important;
    font-family: 'Rubik', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400;
    height: 50px !important;
    padding: 12px 24px;
    border: none !important;
    border-radius: 0px !important;
    cursor: pointer;
    transition: background 0.3s ease;
}

/* 2. Excepciones Específicas */

/* Color diferente para el botón de enviar quiz (si deseas mantener el celeste) */
button#button-submit-quiz {
    background: #68c4e0 !important;
}

/* 3. Estados Hover (Opcional pero recomendado para UX) */
button.lp-button:hover, 
button#button-submit-quiz:hover {
    opacity: 0.9;
}

./* --- 1. ELEMENTOS DE INTERFAZ Y CONTENEDORES --- */

/* Encabezados y Modales */
.lp-modal-content .lp-modal-header,
.quiz-status > div {
    background: #0068A7 !important;
}
/* Tipografía y Contadores (Cuestionarios) */
.countdown,
.questions-index,
.questions-index span {
    color: #ffffff !important;
    text-transform: none; /* Opcional: asegura consistencia */
}

/* Botón de Confirmación (Si/Aceptar) */
button.lp-button.btn-yes {
    background-color: #0068A7 !important;
}
/* Botón Finalizar Curso (General) */
button.lp-button.btn-finish-course {
    width: 100% !important;
}
/* Botón Finalizar Curso (Formulario Específico) */
form.lp-form.form-button.form-button-finish-course button.lp-button.lp-btn-finish-course {
    background: #68c4e0 !important; 
    width: 100% !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    font-size: 16px !important;
    font-weight: 400;
    font-style: normal;
    border: none;
}
/* Color de texto para el contador de unidades */
.popup-header__inner.can-finish-course .number,
.popup-header__inner.can-finish-course .items-completed {
    color: #ffffff !important;
}

/* Barra de progreso: Fondo (riel) */
.learn-press-progress::before {
    background: #ffffff !important;
}

/* Barra de progreso: Parte activa (relleno) */
.learn-press-progress__active {
    background: #68c4e0 !important;
}
/* Ocultar flechas y submenús en la sección de ajustes del perfil */
li.settings.has-child a::after,
li.settings.has-child ul.profile-tab-sections {
    display: none !important;
}

/* --- 1. AJUSTES DE PÁGINA DE INICIO (USUARIOS NO LOGUEADOS) --- */
/* Ocultar elementos innecesarios en el Checkout */
.lp-checkout-form__before,
.learn-press-checkout-comment,
div#checkout-order-action {
    display: none !important;
}

/* Títulos de Login y Registro (Checkout) */
div#checkout-account-login h4,
div#checkout-account-register h4 {
    display: flex;
    justify-content: center;
    color: #0068A7 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-bottom: 50px !important;
}

/* Mensajes de notificación de LearnPress (Avisos) */
.learn-press-message {
    width: 50% !important;
    margin: 40px auto !important; /* Centrado con auto en los lados */
}


/* Estilos globales para tablet (768px - 1024px). */

/* ==========================================================================
   1. LÓGICA DE VISIBILIDAD (LOGUEADO VS NO LOGUEADO)
   ========================================================================== */

/* Escenario: Usuario NO logueado -> Ocultar Perfil y Cerrar Sesión */
body:not(.logged-in) .menu-perfil,
body:not(.logged-in) .menu-cerrar-sesion {
    display: none !important;
}

/* Escenario: Usuario SÍ logueado -> Ocultar Iniciar Sesión */
body.logged-in .menu-iniciar-sesion {
    display: none !important;
}
/* ==========================================================================
   2. ESTILOS GENERALES DE LOS ENLACES (ALINEACIÓN Y TAMAÑO)
   ========================================================================== */

/* Alineación flexible para los elementos con iconos */
.menu-iniciar-sesion a,
.menu-cerrar-sesion a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px; 
}

/* Ajuste específico para el diseño de escritorio (según tu código original) */
.ast-desktop .ast-above-header-bar .main-header-menu > .menu-item a.menu-link {
    width: 180px;
    justify-content: center;
}


/* ==========================================================================
   3. ICONOS (PSEUDO-ELEMENTOS ::BEFORE)
   ========================================================================== */
select.courses-order-by {
    min-width: 20% !important;
}

 /* ==========================================================================
   1. CABECERA Y BREADCRUMBS (LEARNPRESS)
   ========================================================================== */
ul.learn-press-breadcrumb {
    font-size: 20px;
    font-weight: 500;
}

header.learn-press-courses-header h1 {
    font-size: 30px !important;
}

/* ==========================================================================
   2. BUSCADOR Y FILTROS
   ========================================================================== */
form.search-courses input[type="search"] {
    margin: 0px !important;
    border-right: none !important;
    border-radius: 0px !important;
    min-width: 420px !important;
}

form.search-courses input[type="search"]:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    transition: none !important;
}

form.search-courses button {
    background: white;
    border-left: none !important;
    border-radius: 0px !important;
    color: #1A1A1A;
}

select.courses-order-by {
    min-width: 20% !important;
    border: none !important;
    border-radius: 0px !important;
    font-size: 14px !important;
    color: #B6B6B6;
}

/* ==========================================================================
   3. TARJETAS DE CURSOS (CONTENEDORES)
   ========================================================================== */
.course-item {
    background: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    border-radius: 0px !important;
}

li.course {
    padding: 0 10px !important;
}

.course-thumbnail {
    padding: 20px;
}

span.course-title {
    font-size: 20px;
    color: #17BBB5;
}

/* Ocultar el precio del curso */
.course-content span.course-item-price {
    display: none;
}

.course-instructor span.instructor-display-name {
    font-family: 'Rubik';
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
}

/* ==========================================================================
   4. DESCRIPCIÓN Y BOTÓN "LEER MÁS"
   ========================================================================== */
.course-short-description {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important; 
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important; 
    line-height: 1.5em !important;
    max-height: 3em !important; 
}

.course-readmore {
    display: flex !important;
    height: 48px;
    padding-left: 24px;
    padding-right: 24px;
    justify-content: center;
    align-items: center;
}

.course-content .course-info .course-readmore {
    border-radius: 0px !important;
    border: none !important;
    background: #0068A7;
}

.course-readmore a {
    border: none !important;
    color: white !important;
    font-family: 'Rubik', sans-serif;
    font-size: 16px !important;
    font-weight: 400 !important;
}

/* ==========================================================================
   5. DISEÑO SEGÚN LAYOUT (GRID vs LIST)
   ========================================================================== */

/* Alineación general de info */
.course-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: center;
}

/* Ajustes para LISTA */
.learn-press-courses[data-layout=list] .course-content .course-info {
    width: 100%;
    display: flex;
    justify-content: initial !important;
    margin-left: -10px !important;
}

.learn-press-courses[data-layout="list"] .course-wrap-meta {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 15px;
}

/* Ajustes para GRID e Instructor */
.learn-press-courses[data-layout="grid"] .course-wrap-meta,
ul.ul-instructor-courses .course-wrap-meta {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start;
    gap: 5px;
}

.learn-press-courses[data-layout=grid] .course-content .course-short-description {
    display: block !important;
}

.learn-press-courses[data-layout="grid"] .course-content {
    display: flex !important;
    flex-direction: column !important;
}

.learn-press-courses[data-layout="grid"] h3.wap-course-title {
    text-align: center;
}

form.form-button button {
    width: 70% !important;
    background: #0068A7 !important;
    color: #ffffff !important;
    border-radius: 0px !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    border: none !important;
}
button.lp-button.button-retake-course {
        background: #0068a7 !important;
        color: #ffffff !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        /* width: 70%; */
        border-radius: 0px !important;
        margin-top: 20px;
    }

.course-graduation.learn-press-message.passed.success {
        display: flex;
        align-items: center;
        width: fit-content;
        min-width: 35%;
        padding: 8px 16px;
        margin-bottom: -40px;
        background: #e5F5ec;
        color: #47B881 !important;
        border-radius: 100px;
        font-size: 16px;
        font-weight: 500;
   
}

/* ==========================================================================
   6. ORDEN DE ELEMENTOS (lp-target)
   ========================================================================== */
.lp-target .course-content {
    display: flex !important;
    flex-direction: column !important; 
}

.course-readmore a {
	padding:0px !important;
}
.lp-archive-courses .course-summary-sidebar {
        margin-top: -510px !important;
    }

/* ==========================================================================
   7. ICONOS DE CURSO (SVG/WEBP)
   ========================================================================== */

/* Estilo base para iconos */
.lp-icon-user-graduate:before,
.lp-icon-file:before,
span.course-item-ico.lp_lesson::before,
.meta-item.meta-item-duration::before,
.meta-item.meta-item-level::before,
.meta-item.meta-item-lesson::before,
.meta-item.meta-item-student::before {
    content: "" !important;
    display: inline-block;
    width: 19px; 
    height: 25px;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 8px; 
}

/* Asignación de imágenes específicas */
.meta-item.meta-item-duration::before { background-image: url('https://capacitate.dhisve.com/wp-content/uploads/2026/03/access_time.webp'); }
.meta-item.meta-item-level::before { background-image: url('https://capacitate.dhisve.com/wp-content/uploads/2026/03/Level.webp'); }

.lp-icon-file:before,
span.course-item-ico.lp_lesson::before,
.meta-item.meta-item-lesson::before { background-image: url('https://capacitate.dhisve.com/wp-content/uploads/2026/03/book.webp'); }

.lp-icon-user-graduate:before,
.meta-item.meta-item-student::before { background-image: url('https://capacitate.dhisve.com/wp-content/uploads/2026/03/academy.webp'); }

/* Visibilidad de Meta Items */
.meta-item { display: block !important; }
.meta-item.meta-item-quiz { display: none !important; }

/* ==========================================================================
   8. SWITCH DE LAYOUT (GRID / LIST)
   ========================================================================== */
.switch-layout {
    display: flex;
    border-radius: 4px; 
    overflow: hidden;
    width: fit-content;
}

.switch-layout input[type="radio"] {
    display: none !important;
}

.switch-layout .switch-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 50px; 
    height: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none !important;
    margin: 0 !important;
    background-color: #F0F9FC !important;
    padding: 5px !important;
}

.switch-layout .switch-btn::before {
    content: "" !important;
    width: 24px !important;
    height: 24px !important;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: #68C4E0 !important;
}

.switch-layout .switch-btn.grid::before {
    -webkit-mask-image: url('https://capacitate.dhisve.com/wp-content/uploads/2026/03/view_module.webp');
    mask-image: url('https://capacitate.dhisve.com/wp-content/uploads/2026/03/view_module.webp');
}

.switch-layout .switch-btn.list::before {
    -webkit-mask-image: url('https://capacitate.dhisve.com/wp-content/uploads/2026/03/toc.webp');
    mask-image: url('https://capacitate.dhisve.com/wp-content/uploads/2026/03/toc.webp');
}

.switch-layout input[type="radio"]:checked + .switch-btn {
    background-color: #82C5DE !important;
}

.switch-layout input[type="radio"]:checked + .switch-btn::before {
    background-color: #ffffff !important;
}

.learn-press-courses[data-layout="grid"] {
    display: flex !important;
    flex-wrap: wrap !important;
   
}

.learn-press-courses[data-layout="grid"] li.course {
    display: flex !important;
    flex: 1 1 calc(25% - 20px) !important; 
    min-width: 250px !important;
    height: auto !important;
}

/* 2. Estructura interna de la tarjeta en GRID */
.learn-press-courses[data-layout="grid"] .course-item {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    background: #fff;
    border: 1px solid #eaeaea;
}

.learn-press-courses[data-layout="grid"] .course-content {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    padding: 20px !important;
    text-align: center;
}

/* 3. Alturas fijas para simetría en GRID */


a.course-permalink {
	text-decoration:none !important;
}
.learn-press-courses[data-layout="grid"] .wap-course-title {
    min-height: 3.5em !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 10px !important;
}

/* Descripción limitada a 2 líneas en GRID */
.learn-press-courses[data-layout="grid"] .course-short-description {
    min-height: 3.1em !important; 
    max-height: 3.1em !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    margin-bottom: 15px !important;
    text-overflow: ellipsis !important;
}

/* 4. Empujar el bloque de información al final (Alineación de botones) */
.learn-press-courses[data-layout="grid"] .course-info {
    margin-top: auto !important; 
    padding-top: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* 5. Proporción de imágenes en GRID */
.learn-press-courses[data-layout="grid"] .course-img img {
    width: 100% !important;
    height: 200px !important; 
    object-fit: cover !important; 
}

.learn-press-courses[data-layout=list] .course-content {
   
    padding: 20px !important;
}


/* modificacion de los cursos en el home

.learnpress .course-content {
    display: flex !important;
    flex-direction: column !important; 
}*/
.course-content .wap-course-title { 
    order: 1 !important; 
}
.learnpress  .course-content .course-short-description { 
    order: 2 !important; 
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}
.learnpress  .course-content .course-instructor-category { 
    order: 3 !important; 
    margin-bottom: 10px !important;
}
.learnpress .course-content .course-wrap-meta { 
    order: 4 !important; 
    margin-bottom: 15px !important;
}
.learnpress  .course-content .course-info{
	order: 5 !important; 
    margin-bottom: 15px !important;
}
.learnpress span.course-title{
	 text-align: center;
}
.lp-single-instructor .learn-press-courses[data-layout="grid"] h3.wap-course-title {
    text-align: center;
}

p.course-short-description {
    padding-right: 20px !important;
}
span.instructor-display-name {
    font-size: 16px !important;
    font-style: normal;
    font-weight: 400;
}




/* eliminar o cambiar */
.course-detail-info {
    background: #F0F9FC!important;
}


/* pagina intructor */
.lp-single-instructor .course-content {
    display: flex !important;
    flex-direction: column !important; 
}
.course-content .wap-course-title { 
    order: 1 !important; 
}
.lp-single-instructor .course-content .course-short-description { 
    order: 2 !important; 
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}
.lp-single-instructor .course-content .course-instructor-category { 
    order: 3 !important; 
    margin-bottom: 10px !important;
}
.lp-single-instructor .course-content .course-wrap-meta { 
    order: 4 !important; 
    margin-bottom: 15px !important;
}
.lp-single-instructor .course-content .course-info{
	order: 5 !important; 
    margin-bottom: 15px !important;
}
.lp-single-instructor span.course-title{
	 text-align: center;
}
.lp-single-instructor .learn-press-courses[data-layout="grid"] h3.wap-course-title {
    text-align: center;
}



/* Contenedor principal: Quita bordes y centra */
.wrapper-course-nav-tabs.TabsDragScroll {
    border: none !important;
    margin-bottom: 20px;
}

/* Estilo de la lista (UL) */
ul.learn-press-nav-tabs.course-nav-tabs {
    display: flex !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    background-color: #ffffff; 
    border-radius: 4px;
    overflow: hidden;
}

/* Estilo de cada pestaña (LI) */
.course-nav-tabs li.course-nav {
    flex: 1; 
    text-align: center;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    transition: all 0.3s ease;
}

/* El texto dentro de la pestaña (Label) */
.course-nav-tabs li.course-nav label {
    display: block;
    padding: 15px 20px;
    cursor: pointer;
    font-weight: 500;
    color: #0068a7; 
    margin: 0;
}

/* ==========================================
   1. NAVEGACIÓN (Tabs)
   ========================================== */

/* Pestaña Activa */
.course-nav-tabs li.course-nav.active {
    background-color: #3371AD !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.course-nav-tabs li.course-nav.active label {
    color: #ffffff !important;
}

/* Efecto Hover (Pestañas no activas) */
.course-nav-tabs li.course-nav:hover:not(.active) {
    background-color: #e9ecef;
}

/* ==========================================
   2. ESTRUCTURA GRID (Alineación y Alturas)
   ========================================== */

/* Contenedor: Fuerza que los items de una fila tengan el mismo alto */
.learn-press-courses[data-layout="grid"],
ul.learn-press-courses.grid {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

/* Elemento LI: Se comporta como contenedor flex */
.learn-press-courses[data-layout="grid"] li.course,
ul.learn-press-courses.grid li.course {
    display: flex !important;
    flex-direction: column !important;
}

/* Tarjeta interna (Course Item): Ocupa el 100% del alto del LI */
.learn-press-courses[data-layout="grid"] .course-item,
ul.learn-press-courses.grid .course-item {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    flex: 1 0 auto !important;
    background: #fff;
}

/* Imagen: Mantiene proporción uniforme */
.learn-press-courses[data-layout="grid"] .course-img img,
ul.learn-press-courses.grid .course-img img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
}

/* ==========================================
   3. CONTENIDO INTERNO (Simetría Visual)
   ========================================== */

/* Bloque de contenido: Empuja el footer hacia abajo */
.learn-press-courses[data-layout="grid"] .course-content,
ul.learn-press-courses.grid .course-content {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    padding: 20px !important;
}

/* Título: Altura mínima para 2-3 líneas */
.learn-press-courses[data-layout="grid"] .wap-course-title,
ul.learn-press-courses.grid .wap-course-title {
    min-height: 3.5em !important;
    display: flex !important;
    align-items: center !important;
    order: 1 !important;
}

/* Descripción: Espacio uniforme */
.learn-press-courses[data-layout="grid"] .course-short-description,
ul.learn-press-courses.grid .course-short-description {
    min-height: 4.5em !important;
    margin: 15px 0 !important;
    order: 2 !important;
}

/* Meta información (Instructor/Categoría) */
.learn-press-courses[data-layout="grid"] .course-instructor-category { order: 3 !important; }
.learn-press-courses[data-layout="grid"] .course-wrap-meta { order: 4 !important; }

/* Bloque Final (Precio y Botón): Anclado al fondo */
.learn-press-courses[data-layout="grid"] .course-info,
ul.learn-press-courses.grid .course-info {
    margin-top: auto !important; /* El secreto de la alineación inferior */
    padding-top: 20px !important;
    order: 5 !important;
}






/* ==========================================
   1. NAVEGACIÓN DE PESTAÑAS (Tabs)
   ========================================== */

/* Contenedor principal */
.wrapper-course-nav-tabs.TabsDragScroll {
    border: none !important;
    margin-bottom: 20px;
}

/* Lista de pestañas (UL) */
ul.learn-press-nav-tabs.course-nav-tabs {
    display: flex !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: #f9f9f9;
    border-radius: 4px;
    overflow: hidden;
}

/* Elementos individuales (LI) */
.course-nav-tabs li.course-nav {
    flex: 1; /* Distribución uniforme */
    text-align: center;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    transition: all 0.3s ease;
}

/* Texto de las pestañas (Label) */
.course-nav-tabs li.course-nav label {
    display: block;
    padding: 15px 20px;
    cursor: pointer;
    font-weight: 500;
    color: #2c64a0;
    margin: 0;
}

/* Pestaña Activa */
.course-nav-tabs li.course-nav.active {
    background-color: #3371AD !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.course-nav-tabs li.course-nav.active label {
    color: #ffffff !important;
}

/* Efecto Hover */
.course-nav-tabs li.course-nav:hover:not(.active) {
    background-color: #e9ecef;
}

/* ==========================================
   2. VISTA DE LISTA (data-layout="list")
   ========================================== */

.learn-press-courses[data-layout="list"] .course-content,
.learn-press-courses[data-layout="list"] .course-thumbnail {
    width: 100% !important;
}

/* ==========================================
   3. VISTA DE CUADRÍCULA (data-layout="grid")
   ========================================== */

/* Contenedor Grid */
ul.learn-press-courses[data-layout="grid"] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Elementos del curso en Grid */
ul.learn-press-courses[data-layout="grid"] li.course {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Card interna en Grid */
ul.learn-press-courses[data-layout="grid"] .course-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%; /* Altura uniforme */
    background: #fff;
    border: 1px solid #eee;
}










/* ==========================================
   1. VISTA DE GRID (General y Home)
   ========================================== */

/* Contenedor principal en el Home */
.home-cursos ul.learn-press-courses[data-layout="grid"] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0px !important;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Ajuste general de las tarjetas */
.learn-press-courses .course {
    width: 100%;
}

/* ==========================================
   2. VISTA DE LISTA (Reset)
   ========================================== */

/* Asegura que el layout de lista se comporte como bloque */
ul.learn-press-courses[data-layout="list"] {
    display: block !important;
}

ul.learn-press-courses[data-layout="list"] li.course {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}



/* 2. ESTRUCTURA, SIDEBAR Y CONTENEDORES en curso individual
   -------------------------------------------------------------------------- */
.course-detail-info {
    padding-left: 20px !important;
    margin-bottom: 20px !important;
	 background: #F0F9FC !important;
	padding-right: 20px !important;
}
.course-meta__pull-left {
    color: #080808 !important;
}

/* Sidebar Ajustes */
.lp-archive-courses .course-summary-sidebar,
.lp-archive-courses .course-summary-sidebar__inner {
    width: 100% !important;
}

.lp-archive-courses .course-summary-sidebar {
    margin-top: 10px !important;
}
.course-summary-sidebar.slide-down .course-summary-sidebar__inner {
    position: static !important;
}
/* 3. AVATARES DEL INSTRUCTOR (PEQUEÑO Y GRANDE)
   -------------------------------------------------------------------------- */


.lp-course-author {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
.course-author__pull-right {
    text-align: center !important;
}

/* 4. PESTAÑAS (TABS) Y CURRÍCULO
   -------------------------------------------------------------------------- */
div#tab-overview {
    height: 400px;
    padding-bottom: 50px;
}

div#tab-instructor {
    height: 310px !important;
    background: #FFFFFF;
}

ul.learn-press-nav-tabs.course-nav-tabs label {
    font-size: 16px !important;
    font-weight: 400;
    font-style: normal;
}

.course-section-header {
    background: #ffffff !important;
    display: flex;
    flex-direction: row-reverse;
}

li.course-section,
li.course-section.lp-collapse {
    border-radius: 0px;
}
/* ============================================================
   2. TABS / PESTAÑAS DE NAVEGACIÓN (CURSO)
   ============================================================ */

/* Contenedor principal */
.wrapper-course-nav-tabs.TabsDragScroll {
    border: none !important;
    margin-bottom: 20px;
}

/* Lista de pestañas (UL) */
ul.learn-press-nav-tabs.course-nav-tabs {
    display: flex !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    background-color: #ffffff; 
    border-radius: 4px;
    overflow: hidden;
}

/* Elementos individuales (LI) */
.course-nav-tabs li.course-nav {
    flex: 1; 
    text-align: center;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    transition: all 0.3s ease;
}

/* Etiquetas de texto (Labels) */
.course-nav-tabs li.course-nav label {
    display: block;
    padding: 15px 20px;
    cursor: pointer;
    font-weight: 500;
    color: #0068a7; 
    margin: 0;
}

/* Pestaña Activa */
.course-nav-tabs li.course-nav.active {
    background-color: #3371AD !important; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
}

.course-nav-tabs li.course-nav.active label {
    color: #ffffff !important; 
}

/* Efecto Hover */
.course-nav-tabs li.course-nav:hover:not(.active) {
    background-color: #e9ecef;
} 
/* 5. BOTONES Y ACCIONES
   -------------------------------------------------------------------------- */
button.lp-button.course-btn-continue,
button.lp-button.button-enroll-course {
    background: #0068A7 !important;
    border-radius: 0px !important;
    color: #ffffff !important;
    width: 50% !important;
}

.course-summary-sidebar .lp-course-buttons > * {
    margin-bottom: 0px !important;
    margin-top: 20px !important;
    align-items: center !important;
}

/* 6. ELEMENTOS OCULTOS
   -------------------------------------------------------------------------- */
.meta-item.meta-item-categories .meta-item__value,
li.course-nav.course-nav-tab-lp_certificate,
div#comments,
.section-count-items {
    display: none !important;
}

ul.learn-press-nav-tabs.course-nav-tabs {
    gap: 0px;
}
.lp-archive-courses .lp-entry-content {
     flex-direction: column-reverse !important;
     padding: 0px 10px 0px 10px !important;
     min-width: 220px !important;
     width: 100% !important;
}
/* Detalles de Meta e Instructor */
.meta-item__value > label { font-size: 16px !important; font-weight: 700 !important; }
.meta-item__value span { font-size: 16px !important; font-weight: 400; color: #080808 !important; }
h1.course-title {
        color: #17BBB5 !important;
        font-family: 'Rubik', sans-serif;
        font-size: 20px !important;
    }

.lp-archive-courses .course-summary-sidebar, .lp-archive-courses .course-summary-sidebar__inner {
        width: 300px !important;
    }
.course-info-left .meta-item.meta-item-instructor {
    display: flex !important;
    flex-direction: row;
}
/* ==========================================================================
   1. PANTALLA DE INICIO DE SESIÓN Y REGISTRO (LearnPress)
   ========================================================================== */
/* Contenedores Principales */
.learn-press-form-login.learn-press-form,
.learn-press-form-register.learn-press-form {
    background: #ffffff;
}
/* Títulos y Línea Divisoria */
.learn-press-form-login h3,
.learn-press-form-register h3 {
    display: block !important;
    text-align: center;
    font-size: 20px !important;
    font-weight: 700 !important;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
    margin-bottom: 25px;
}
/* Visibilidad de Etiquetas y Enlaces */
li.form-field label {
    display: none !important; 
}
.learn-press-form-login form a,
.learn-press-form-login p:has(a[href*="lostpassword"]) {
    display: none !important; 
}
.learn-press-form-login.learn-press-form p > label {
    display: inline-block !important; 
    font-size: 14px !important;
    font-weight: 400;
}
/* Configuración Unificada de Botones (Login y Registro) */
.learn-press-form-login form p:has(button[type="submit"]),
.learn-press-form-register form p:has(button[type="submit"]) {
    text-align: center;
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
.learn-press-form-login button[type="submit"],
.learn-press-form-register button[type="submit"] {
    width: 80% !important;
    height: 50px !important;
    background-color: #0068a7 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0px !important;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    margin: 0 auto !important;
    display: block;
}
.learn-press-form-login button[type="submit"]:hover,
.learn-press-form-register button[type="submit"]:hover {
    background-color:
}
.lp-user-profile.guest .lp-content-area {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}







.lp-content-area {
    display: flex;
    flex-direction: column; /* Los pone uno arriba del otro */
    align-items: center;
    max-width: 500px; /* Estrecha el formulario para que no se vea gigante */
    margin: 0 auto;
}

.learn-press-form {
    width: 100% !important;
    margin-bottom: 30px;
}


/* ==========================================================================
   2. PANEL DE PERFIL Y ESTADÍSTICAS (Usuario Logeado)
   ========================================================================== */

/* Reemplazo de Iconos de Estadísticas */
.statistic-box__icon span[class^="lp-icon-"]::before {
    display: none !important; 
}

.statistic-box__icon span[class^="lp-icon-"] {
    display: block;
    width: 60px;
    height: 60px;
    background-image: url('https://capacitate.dhisve.com/wp-content/uploads/2026/03/Frame-810.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
}

.statistic-box__icon {
    background: transparent !important;
    border: none !important;
}

.lp-content-area.lp-profile-content-area {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lp-user-profile .lp-profile-content-area {
        align-items:center !important;
	padding-top:40px !important;
}
aside#profile-sidebar {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
}
ul.lp-profile-nav-tabs {
    border-left: 1px solid #D1D1D1;
}
article#profile-content {
    padding-left: 20px !important;
    padding-right: 20px !important;
}
table.lp_profile_course_progress.lp-list-table {
    min-width: 500px !important;
}
.lp-profile-user-bio,
li.courses,
li.orders,
li.logout {
    display: none !important; 
}

.statistic-box span {
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
}

.dashboard-statistic__row label {
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 400 !important;
}

table.lp_profile_course_progress.lp-list-table th {
    background: #E0E0E0;
   
}

tr.lp_profile_course_progress__item.lp_profile_course_progress__header {
    border: 1px solid #BDBDBD;
}

tr.lp_profile_course_progress__item.lp_profile_course_progress__header th {
    font-size: 16px !important;
    font-style: normal;
    font-weight: 700 !important;
}

ul.learn-press-filters a {
    font-size: 20px !important;
    font-style: normal !important;
    font-weight: 700;
    text-decoration: none !important;
}

tr.lp_profile_course_progress__item .course-title {
    font-size: 16px !important;
    font-style: normal;
    font-weight: 500;
}

tr.lp_profile_course_progress__item a {
    text-decoration: none !important;
}

table.lp-list-table.profile-list-table.profile-list-quizzes thead {
    background: #E0E0E0;
    border: 1px solid #bdbdbd !important;
    color: #000000;
}

table.lp-list-table.profile-list-table.profile-list-quizzes th{
	width:25%;
}

.profile-list-quizzes thead th:nth-child(4) {
    font-size: 0 !important;
    white-space: nowrap;
}

.profile-list-quizzes thead th:nth-child(4)::after {
    content: "Día de comienzo";
    font-size: 16px; 
    visibility: visible;
    display: inline-block;
	font-weight:700;
	font-style:normal;
}

.profile-list-quizzes thead th:nth-child(1),
.profile-list-quizzes thead th:nth-child(2),
.profile-list-quizzes thead th:nth-child(3) {
    font-size: 16px !important; 
    font-weight: 700;         
    color: #000000;            
}

form#lp-enrolled-students-form {
    background: #E0E0E0;
    border: 1px solid #bdbdbd;
}

table.lp-list-table.lp-enrolled-students-table thead {
    background: #e0e0e0;
    border: 1px solid #bdbdbd;
}

/* ajuste en pantalla perfil */
/* ==========================================================================
   CAMBIO DE ICONOS Y EFECTO HOVER (BLANCO)
   ========================================================================== */

/* 1. Ocultar los iconos originales */
.lp-profile-nav-tabs i[class^="lp-icon-"]::before {
    display: none !important;
}
/* 2. Insertar imagen de flecha (Estado Normal - Oscuro) */
.lp-profile-nav-tabs i[class^="lp-icon-"] {
    display: inline-block !important;
    width: 20px !important;  
    height: 20px !important;
    background-image: url('https://capacitate.dhisve.com/wp-content/uploads/2026/03/arrow_forward_ios.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin-right: 15px;      
    vertical-align: middle;
    transition: filter 0.3s ease; 
}
/* 3. EFECTO BLANCO: Cuando la pestaña está ACTIVA o en HOVER */
.lp-profile-nav-tabs li.active i[class^="lp-icon-"],
.lp-profile-nav-tabs li:hover i[class^="lp-icon-"] {
    
    filter: brightness(0) invert(1) !important;
}
/* 4. Estilo de los textos al pasar el mouse (para que coincida con tu imagen) */
.lp-profile-nav-tabs li:hover a,
.lp-profile-nav-tabs li.active a {
    color: #ffffff !important;
    background-color: #0068A7 !important; /* El azul de tu marca */
    text-decoration: none !important;
}

/* Asegurar que el contenedor LI no tenga bordes extraños al hacer hover */
.lp-profile-nav-tabs li {
    transition: background-color 0.3s ease;
}
div#profile-content-certificates h3.profile-heading {
    display: none !important;
}
.learn-press-course-tab-created.learn-press-course-tab-filters {
    display: none;
}
ul.lp-profile-nav-tabs {
    display: flex;
    flex-direction: column;
}
.lp-profile-nav-tabs li a {
    display: flex !important;
    align-items: center;
    padding: 15px 20px !important;
    position: relative;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    border-bottom: 1px solid #D1D1D1; /* Línea divisoria de la imagen */
}
ul.lp-profile-nav-tabs li a {
	flex-direction:row !important;
	padding: 20px !important;
}
.statistic-box__text {
    justify-content: center !important;
    flex-direction: column;
	align-items: flex-start !important;
}
.statistic-box {
    gap: 20px !important;
}


/* parte interna del curso */
.content-item-summary button.lp-button.button-complete-lesson.lp-btn-complete-item{
	width:100% !important;
}

/* ==========================================
    RESPONSIVO (Breakpoints)
   ========================================== */
@media (min-width: 768px) and (max-width: 1023px){
	.lp-archive-courses .lp-entry-content {
    display: flex;
    flex-direction: row !important;
		
}
	.lp-archive-courses .course-summary-sidebar {
    margin-top: -560px !important;
}
	
	
	
}
/* Tablets y pantallas medianas (992px) */
@media (max-width: 992px) {
    .lp-target ul.learn-press-courses[data-layout="grid"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Tablets pequeñas (768px) */
@media (max-width: 768px) {
    .learn-press-courses[data-layout="grid"] {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

/* Móviles (600px) */
@media (max-width: 600px) {
    ul.learn-press-courses[data-layout="grid"] {
        grid-template-columns: 1fr !important;
    }
}