/*--------------------------------------------------------------
This is your custom stylesheet.

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/


/* Estilos para el formulario de filtrado y ordenación */
.eb_filter_and_sorting {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}

.eb_archive_filter, .eb_archive_sort {
    flex: 1 1 200px;
}

.eb_archive_filter_lbl, .eb_archive_sort_lbl {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #2c3e50;
}

#eb_category_filter, #eb_category_sort {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    font-size: 14px;
    color: #333;
    transition: border-color 0.3s ease;
}

#eb_category_filter:focus, #eb_category_sort:focus {
    border-color: #3498db;
    outline: none;
}

/* Estilos para las tarjetas de cursos */
.eb-cat-parent {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.eb-course-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex: 1 1 calc(33.333% - 40px);
    max-width: calc(33.333% - 40px);
}

.eb-course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.wdm-course-thumbnail {
    display: block;
    text-decoration: none;
    color: inherit;
}

.wdm-course-image img {
    width: 100%;
    height: auto;
    display: block;
}

.wdm-caption {
    padding: 15px;
}

.eb-cat-wrapper-new {
    font-size: 12px;
    color: #3498db;
    font-weight: 500;
    margin-bottom: 10px;
}

.eb-course-title {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
}

.eb_short_desc {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

.wdm-price {
    font-size: 16px;
    font-weight: 600;
    color: #27ae60;
}

.wdm-price.free {
    color: #e67e22;
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .eb-course-card {
        flex: 1 1 calc(50% - 20px);
        max-width: calc(50% - 20px);
    }
}

@media (max-width: 480px) {
    .eb-course-card {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .eb_filter_and_sorting {
        flex-direction: column;
    }
}


body.login.login-split-page .login-split {
    width: 100%;
}

/********************************************************ESTILOS HEADER**************************************************************** */

#primary-menu.primary-menu > li.menu-item > a {
    transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    will-change: background-color, color !important;
}

#primary-menu.primary-menu > li.menu-item > a:hover,
#primary-menu.primary-menu > li.menu-item.current-menu-item > a {
    background-color: rgba(0, 66, 90, 0.85) !important;
    color: white !important;
    transition-duration: 0.1s !important;
    transition-timing-function: ease-out !important;
}

/* Efecto adicional para mejor feedback visual */
#primary-menu.primary-menu > li.menu-item > a:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 66, 90, 0.2) !important;
}

.primary-menu > li > a {
    
    color: white;
}

/*hover menu*/
:root{
	--bb-header-alternate-background: trasparent !important;
}

/*style perfil menu admin name*/
.user-wrap .user-name {
    color: white !important;
}

/* Color al hacer hover (rojo) */
.user-wrap:hover .user-name {
    color: #064154 !important;
}

.sub-menu-inner .user-name {
    color: white !important;
}

.sub-menu-inner a:hover .user-name {
    color: #064154 !important;
}


/*color hover active*/
.sub-menu-inner .user-name {
    color: #064154 !important;
}

.sub-menu-inner:hover .user-name,
.sub-menu-inner:focus-within .user-name {
    color: #064154 !important;
}

/* Color del nombre de usuario en su estado normal (blanco) */
.sub-menu-inner .user-name {
    color: #064154 !important;
}

.sub-menu-inner:hover .user-name,
.sub-menu-inner:focus-within .user-name {
    color: #064154 !important;
}

/*color cursos fuera div*/

.user-wrap .user-name {
  color: white !important;
}

.user-wrap.selected .user-name {
  color: #064164 !important;
}



/*submenu two lines*/
.wrapper.ab-submenu .bb-sub-menu li a span {
    white-space: normal !important;
    word-wrap: break-word !important;
    display: inline-block !important;
    max-width: 100% !important;
}


.sub-menu-inner > li.menu-item > a > span {
    white-space: normal !important;
    word-wrap: break-word !important;
    display: inline-block !important;
}

.wrapper.ab-submenu .bb-sub-menu li a span {
    white-space: normal !important;
    word-wrap: break-word !important;
    display: inline-block !important;
    max-width: 200px !important; 
    line-height: 1.4 !important; 
}

.primary-menu > li > a > span {
    white-space: normal !important;
    word-wrap: break-word !important;
    display: inline-block !important;
    max-width: 140px !important; 
    line-height: 1.4 !important;
    text-align: center; 
}

#menu-item-18032 > a > span {
    white-space: normal !important;
    word-wrap: break-word !important;
    display: inline-block !important;
    max-width: 80px !important; 
    line-height: 1.4 !important;
    text-align: center !important;
}


.site-header-container {
  max-width: 1440px; 
  margin: 0 auto; 
  padding: 0 26px; 
  box-sizing: border-box;
}

#menu-item-18469 > a {
    padding-left: 0px !important;
    padding-right: 0px !important;
}