@import url('./components.css');

/* Barra SAVAL */

.barra-saval {
    background-color: var(--clr-bg-lightblue);
    padding: 0.25rem 0;
}
.barra-saval ul {
    display: flex;
    justify-content: end;
    align-items: center;
    font-size: 0.75rem;
    color: var(--clr-text-primary)
}

.barra-saval ul li {
    border-right: 1px solid var(--clr-primary-hover);
    padding: 0.125rem 0.75rem;
    line-height: 1em;
    display: block;
}

.barra-saval ul li:last-child {
    border-right: none;
}

.barra-saval ul li a {
    color: inherit;
}

@media screen and (max-width: 768px) {
    .barra-saval ul {
        justify-content: center;
    }
    .barra-saval ul li {
        font-size: 0.66rem
    }
}

@media screen and (max-width: 575px) {
    .barra-saval{
        display: none;
    }
}
/* Header ======================================================== */
header {
    background-color: #fff;
    box-shadow: 0 0 .75rem rgba(0, 0, 0, .1)
}

header .header-logo img {
    max-height: 6rem;
    display: block;
}

header .header-input-group {
    display: flex;
}

header .header-input-group input {
    width: 100%;
    padding: .5rem 1.25rem;
    border: 1px solid var(--clr-primary);
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
    color: var(--clr-text);
    line-height: 1;
}

header .header-input-group input::placeholder {
    color: var(--clr-primary);
    opacity: .5;
}

header .header-input-group button {
    background-color: var(--clr-primary);
    line-height: 1;
    display: flex;
    align-items: center;
    padding: 0 .666rem 0 .5rem;
    border-bottom-right-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    outline: none;
    border: none;
}

header .header-input-group button:hover {
    background-color: var(--clr-primary-hover);
}

header .header-input-group input:focus-visible {
    outline: 2px solid #BFDCEF;
}

header .header-input-group input:focus-visible+button {
    outline: 2px solid #BFDCEF;
}

header .header-input-group button span {
    font-size: 1.5rem;
    color: #fff;
    max-width: 1.5rem;
}

header .header-ayuda {
    color: var(--clr-primary);
    font-size: var(--font-menu);
    text-decoration: none;
}

header .header-ayuda .symbols {
    margin-right: .125rem;
    line-height: .8em;
    font-size: 1.437rem;
    font-variation-settings: 'wght' 350, 'opsz' 20, 'GRAD' -25;
    max-width: var(--font-menu);
}

header .header-mobile__icon img {
    height: 2.5rem;
    object-fit: contain;
}

.ingresar {
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    height: 2.5rem;
    gap: .25rem;
}

.ingresar img {
    height: 1.5rem;
}

header .header-user {
    display: flex;
    gap: .5rem;
    align-items: center;
}

header .header-user .header-user__p {
    color: var(--clr-primary);
    user-select: none;
    margin: 0;
    padding: 0;
    line-height: 1em;
}

header .header-user .header-user__img {
    height: 3rem;
    width: 3rem;
    position: relative;
}

header .header-user .header-user__img img {
    border: 2px solid var(--clr-primary);
    border-radius: 100vmax;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

header .header-user .header-user__img::after {
    font-family: 'Material Symbols Rounded';
    font-size: 1rem;
    color: var(--clr-primary);
    content: "\e313";
    position: absolute;
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid var(--clr-primary);
    border-radius: 100vmax;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    right: -.175rem;
    bottom: -.175rem;
    z-index: 2;
}

header .header-user-menu,
header .header-mobile__search-menu {
    border-radius: .5rem;
    border: 0;
    background-color: #fff;
    padding: 0;
    overflow: hidden;
    min-width: 15rem;
}

.header-mobile__search-menu.dropdown-menu {
    position: fixed !important;
    top: 100px !important;
    left: 1rem !important;
    right: 1rem !important;
    width: auto !important;
    margin: 0 !important;
    transform: none !important;
    max-width: none !important;
    border-radius: 0.25rem !important;
    z-index: 50;
}

.ui-autocomplete {
    background-color: #fff;
    padding: 0.5rem 0;
    z-index: 1000;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
}

.ui-menu-item {
    color: var(--clr-text);
    cursor: pointer;
    padding: 0;
}

.ui-widget.ui-widget-content {
    border: none;
    font-family: 'Overpass', sans-serif;

}


.ui-menu-item,
.ui-menu-item .ui-menu-item-wrapper {
    border: none !important;
    color: var(--clr-text);
    font-family: 'Overpass', sans-serif;

}

.ui-menu .ui-menu-item-wrapper {
    background-color: transparent;
    color: var(--clr-text);
    padding: 0.5rem 1rem;
}

.ui-menu-item:hover,
.ui-menu-item:active {
    background-color: var(--clr-bg-lightblue);
    color: inherit;
    border: none;
}



.ui-menu .ui-menu-item .ui-menu-item-wrapper.ui-state-active {
    background-color: var(--clr-bg-lightblue-hover);
}

.header-mobile__search-menu {
    top: 0.5rem;
}

header .header-user-menu__item a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    font-size: var(--font-menu);
    font-weight: 700;
    color: var(--clr-primary);
    vertical-align: middle;
    text-decoration: none;
}

header .header-user-menu__item a:hover {
    background-color: var(--clr-bg-lightblue-active);
}

header .header-user-menu__item a span {
    font-size: 1.75rem;
    max-width: 1.75rem;
    font-weight: 400;
    font-variation-settings: 'wght' 400, 'opsz' 24;
}

header .dropdown-ingreso .dropdown-menu {
    padding: 1.5rem;
    border-radius: .5rem;
    border: 0;
    --bs-dropdown-min-width: 18rem;
}

/* Footer =============================================================== */
footer {
    background-color: var(--clr-primary);
    font-size: var(--font-medium);
    color: #fff;
    margin-top: auto;
}

footer a {
    color: inherit;
}

footer a:hover {
    text-decoration: underline;
}

/* Invitación Newsletter ================================================ */

.newsletter-field {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
    display: flex;
}

.newsletter-input {
    width: 100%;
    padding: 1rem 1rem;
    border: 0;
    outline: 0;
    border-radius: 0;
    line-height: 1em;
}

.newsletter-input::placeholder {
    letter-spacing: 2.5px;
    font-size: 1rem;
    color: var(--clr-text-placeholder-alt);
    line-height: 1em;
}

.newsletter-btn {
    text-transform: uppercase;
    padding: 1rem 4.5rem;
    background-color: var(--clr-primary);
    font-size: 1rem;
    color: #fff;
    border: none;
    font-weight: 700;
}

@media screen and (max-width: 540px) {
    .newsletter-field {
        display: block;
    }

    .newsletter-btn {
        width: 100%;
        display: block;
    }
}

/* Instituciones ============================================= */
.swiper-instituciones__institucion {
    display: flex;
    justify-content: center;
}

.swiper-instituciones__institucion a {
    border-radius: .5rem;
    display: inline-block;
    position: relative;
    max-height: 86px;
    max-width: 86px;
}

.swiper-instituciones__institucion a img {
    height: 100%;
    width: auto;
    object-fit: contain;
    margin: 0 auto;
}

.swiper-instituciones__hover {
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    background-color: rgba(0, 0, 0, .36);
    color: #fff;
    font-size: 2.5rem;
    font-weight: 600;
    opacity: 0;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    height: calc(100% + 1rem);
    width: calc(100% + 1rem);
    transition: ease 150ms opacity;
}

.swiper-instituciones__institucion a:hover .swiper-instituciones__hover {
    opacity: 1;
    transition: ease 150ms opacity;
}

.dropdown-instituciones button {
    background-color: var(--clr-text);
}

.dropdown-instituciones .dropdown-menu {
    max-width: 100%;
    border: 1px solid var(--clr-border);
    padding: 0;
}

.dropdown-instituciones .dropdown-menu li {
    padding: 0;
}

.dropdown-instituciones .dropdown-menu li a.dropdown-item {
    padding: 1rem 1.5rem;
    white-space: wrap;
    display: flex;
    gap: .5rem;
    align-items: center;
    color: var(--clr-primary);
    border-bottom: 1px solid var(--clr-border);
}

.dropdown-instituciones .dropdown-menu li a.dropdown-item:last-of-type {
    border: none;
}

.dropdown-instituciones__img {
    width: 1.5rem;
    max-height: 1.5rem;
}

.dropdown-instituciones .dropdown-menu li img {
    height: 100%;
    margin: 0 auto;
    object-fit: contain;
}

/* Banners home ========================================================= */

.swiper-banners .swiper-banners__pagination {
    top: 1rem;
    bottom: auto;
}

.swiper-pagination-bullet-active {
    border: 1px solid #fff;
    background: #fff;
}

/* Cursos home ========================================================== */

#cursos-home {
    position: relative;
    max-height: 800px;
    overflow: hidden;
    transition: max-height 500ms ease;
}

#cursos-home.mostrar-expand {
    max-height: none;
}

.mostrar-overlay {
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: 0;
    right: 0;
    height: 15rem;
    background: rgb(255, 255, 255);
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

#home-mostrar {
    margin-top: 5.5em;
}


/* Logros home ========================================================== */

.logro {
    color: #fff;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.logro img {
    height: 5rem;
    margin-bottom: 1rem;
}

.logro h3 {
    color: inherit;
    margin-bottom: .175rem;
    font-weight: 900;
    font-size: 2.25rem;
    line-height: 1em;
}

.logro h3,
.logro p {
    text-align: center;
}

.logro p {
    font-size: 1.25rem;
    margin-bottom: 0;
    line-height: 1.25em;
    color: #fff;
}

/* Testimonios home ===================================================== */

.swiper-testimonios .swiper-testimonios__prev {
    left: 2rem;
}

.swiper-testimonios .swiper-testimonios__next {
    right: 2rem;
}


.slide-testimonio {
    background-color: #e1e1e1;
    border-radius: 2rem;
    margin-top: 4rem;
    padding: 0 1rem 1.5rem;
}

.slide-testimonio__img {
    border: 3px solid var(--clr-primary);
    border-radius: 100vmax;
    object-fit: cover;
    aspect-ratio: 1;
    height: 8rem;
    width: 8rem;
    margin-top: -4rem;
    margin-bottom: 1rem;
}

p.slide-testimonio__p {
    color: var(--clr-primary);
    hyphens: auto;
    padding: 0 calc(3rem + 27px);
    margin: 0 auto 1.5rem;
    max-width: 76ch;
    font-size: 1.15rem;
}

.slide-testimonio__info {
    margin-bottom: .5rem;
}

.slide-testimonio__info h4 {
    margin-bottom: .125rem;
    font-size: 1.5rem;
    font-weight: 900;
}

.slide-testimonio__info p {
    color: var(--clr-primary);
    font-size: 1.2rem;
    margin-bottom: 0;
}

.slide-testimonio__rating {
    display: flex;
    gap: .25rem;
    justify-content: center;
}

.slide-testimonio__rating span img {
    height: 1.25rem;
}

/* Cursos - Index =========================================================== */


.curso-sidebar-chart-info {
    display: flex;
    gap: .5rem;
    align-items: center;
    font-weight: 500;
    font-size: var(--font-menu);
}

.curso-sidebar-chart-info__content {
    width: 75%;
}

.curso-sidebar-chart-info .curso-sidebar-chart-info__dot {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 100vmax;
}

.curso-sidebar-chart-info__teal {
    color: var(--clr-teal);
}

.curso-sidebar-chart-info__orange {
    color: var(--clr-orange);
}

/* Curso usuario no registrado =================================== */

.ficha ul {
    list-style: disc;
    padding-left: 1rem;
    margin-bottom: 1rem;
}

.curso-ficha__seccion {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: 1.5rem;
}

.curso-ficha__seccion h4 {
    position: relative;
}

.curso-ficha__seccion>*:not(h4) {
    padding-left: .75rem;
}

.curso-ficha__seccion ul {
    list-style: disc;
    padding-left: 2rem;
}

.curso-ficha__seccion p:has(> strong):not(:has(*:not(strong))) {
    margin-bottom: .5rem;
}



/* 
.curso-ficha__seccion h4::after {
    content: '';
    position: absolute;
    height: 1px;
    width: 1rem;
    background-color: var(--clr-border);
    top: 50%;
    transform: translateY(-50%);
    left: 0;

} */

.curso-ficha__seccion p:last-child {
    margin: 0;
}

/* Curso usuario registrado ======================================= */
/* Fechas importantes */
section.curso-inicio {
    margin-bottom: 2rem;
}

section.curso-inicio h3 {
    font-size: var(--font-medium);
}


.curso-inicio__item {
    display: flex;
    color: var(--clr-primary);
    line-height: 1em;
    display: flex;
    gap: 1.25rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.curso-inicio__fechas {
    margin-top: 1rem;
}

.curso-inicio__fecha {
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
}

.curso-inicio__fecha .symbols {
    font-weight: 600;
    color: var(--clr-primary);
    vertical-align: top;
    line-height: .85em;
    margin-right: .5rem;
}

/* Mensajes */
.accordion-mensajes .accordion-item {
    margin-bottom: 1rem;
    border: none;
    box-shadow: none;
    border-bottom: 1px solid var(--clr-border);
    border-radius: .25rem;
}

.accordion-mensajes__titulo {
    font-weight: 400;
    font-size: .9rem;
    margin-top: 1px;
}

.accordion-mensajes__titulo .symbols {
    font-weight: 600;
    margin-right: .25rem;
    font-size: 1rem;
}

.accordion-mensajes .accordion-header button {
    background-color: var(--clr-bg-lightblue);
}

.accordion-mensajes .accordion-button:not(.collapsed) {
    box-shadow: none;
}

.accordion-mensajes>.accordion-item>.accordion-header .accordion-button,
.accordion-mensajes>.accordion-item>.accordion-header .accordion-button.collapsed {
    border-radius: .25rem;
    display: flex;
    gap: 1rem;
    color: var(--clr-primary);
    font-weight: 600;
    align-items: center;
}

.accordion-mensajes .accordion-body {
    font-size: 1rem;
    color: var(--clr-text);
    padding: 1rem;
}


.accordion-mensajes>.accordion-item:last-child {
    border-bottom: 1px solid var(--clr-border);
}

/* Actualizaciones */
.curso-inicio__actualizaciones {
    overflow: hidden;
    position: relative;
}

.curso-inicio__actualizaciones.mostrar-expand {
    max-height: none;
}

.curso-inicio__actualizacion {
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: .75rem;
    margin-bottom: 1.5rem;
}

.curso-inicio__actualizacion-titulo {
    border-left: .5rem solid var(--clr-primary);
    padding-left: 1rem;
    border-radius: .25rem;
    margin-bottom: .5rem;
}

.curso-inicio__actualizacion-fecha {
    color: var(--clr-primary);
    font-weight: 400;
}

.curso-inicio__actualizacion-h4 {
    color: var(--clr-primary);
    line-height: 1.25em;
    font-weight: 500;
    margin: 0;
}

.curso-inicio__actualizacion-p {
    color: var(--clr-text);
    margin: 0;
}

/* Miscelaneo */

.teal {
    background-color: var(--clr-teal);
}

.orange {
    background-color: var(--clr-orange);
}

/* Notificaciones ================================================== */
.notif span {
    position: relative;
}

.notif span::after {
    content: '';
    width: .5rem;
    height: .5rem;
    border-radius: 100vmax;
    z-index: 3;
    left: .1rem;
    top: .1rem;
    background-color: var(--clr-red);
    position: absolute;
}

/* Cursos - Actividades ===================================================== */
.accordion-actividades {
    background-color: var(--clr-box-bg);
    padding: 1rem 1rem 0;
    margin: 0 .75rem;
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
}

.actividades-item {
    margin-left: 3rem;
    position: relative;
    padding: 1rem 0;
}

.actividades-item.hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 50ms ease;
}

.actividades-item.visible {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 200ms ease;

}

.actividades-item h4 {
    font-size: var(--font-medium-small);
    color: var(--clr-primary);
    font-weight: 600;
    margin-bottom: .25rem;
}

.actividades-item__expositor {
    font-weight: 400;
    font-size: var(--font-small);
    color: var(--text-primary);
    margin: 0;
}

.actividades-item__fecha,
.actividades-item__tipo {
    font-size: var(--font-small);
    color: var(--text-primary);
    line-height: 1em;
    margin-bottom: .25rem;
}

.actividades-item::before {
    content: '';
    position: absolute;
    width: 4px;
    height: calc(var(--line-height, 100%) - .75rem);
    bottom: 50%;
    left: calc(-3rem + 0.75rem - 2px);
    background-color: var(--clr-primary);
    z-index: 1;
}

.actividades-item::after {
    font-family: 'Material Symbols Rounded';
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1em;
    color: var(--clr-primary);
    content: '';
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 100vmax;
    border: 3px solid var(--clr-primary);
    background-color: #fff;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    transform: translateY(-50%);
    left: -3rem;
    z-index: 3;
}

.actividades-item__encuesta::after,
.actividades-item__check::after,
.actividades-item__eval::after {
    background-color: var(--clr-primary);
    color: #fff;
    font-family: 'Material Symbols Rounded';
}

.actividades-item__check::after {
    content: '\e5ca';

}

.actividades-item__eval::after {
    content: '\e838';
    font-variation-settings: 'FILL' 1;
}

.actividades-item__encuesta::after {
    content: '\e7f2';
    font-weight: 400;
}

.actividades-item__disabled.actividades-item .actividades-item__datos {
    opacity: .5;
    filter: grayscale(.75);
}

.actividades-item__disabled.actividades-item::after {
    border-color: var(--clr-disabled);
    background-color: var(--clr-disabled);
}

.actividades-item__disabled.actividades-item::before {
    background-color: var(--clr-disabled);
}

.actividades-item:first-child {
    margin-top: -1rem;
}

.actividades-item:first-child::before {
    background-color: #fff;
    height: calc(50% - 1rem);
    bottom: 50%;
    z-index: 2;
}

.accordion-actividades .actividades-item__disabled.actividades-item::after {
    border-color: var(--clr-disabled-2);
    background-color: var(--clr-disabled-2);
}

.accordion-actividades .actividades-item__disabled.actividades-item::before {
    background-color: var(--clr-disabled-2);
}

.accordion-actividades .actividades-item:first-child::before {
    background-color: var(--clr-box-bg);
}

/* Clase */

.clase-contenido ul {
    list-style: disc;
    padding-left: 1rem;
    margin-bottom: 1rem;
}

.clase-descargas li a {
    display: block;
    padding: 0.5rem;
    border-bottom: 1px solid var(--clr-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: 200ms ease background-color;
}

.clase-descargas li a:hover {
    background-color: var(--clr-border);
    transition: 200ms ease background-color;
}

.clase-descargas li:last-child a {
    border-bottom: none;
}

.clase-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.clase-nav .dropdown {
    flex: 1;
    min-width: 0;
}

.clase-nav .clase-nav__toggler {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    border: 1px solid var(--clr-border);
    border-radius: .25rem;
    background-color: var(--clr-bg-lightblue);
    transition: 200ms ease background-color;
    text-decoration: none;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
}

.clase-nav .clase-nav__toggler:hover {
    background-color: var(--clr-border);
    transition: 200ms ease background-color;
}

.clase-nav .dropdown-item.active,
.clase-nav .dropdown-item:active {
    color: var(--clr-primary);
    text-decoration: none;
    background-color: var(--clr-bg-lightblue-active);
}

.clase-nav .button {
    white-space: nowrap;
    overflow: hidden;
}

.clase-nav__toggler-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.clase-nav .clase-nav__toggler span.symbols {
    max-width: 1.5rem;
    font-size: 1.5rem;
    display: inline-block;
}

.clase-nav .clase-nav__anterior,
.clase-nav__siguiente {
    display: inline-block;
}

.clase-nav__dropdown {
    border-radius: 0.25rem;
    border: none;
    max-height: 400px;
    overflow-y: scroll;
    width: 100%;
}


.clase-nav__link {
    cursor: pointer;
    padding: 0.75rem 2.75rem 0.75rem 0.75rem;
    text-decoration: none !important;
    border-bottom: 1px solid var(--clr-bg-lightblue);
    position: relative;
}

.clase-nav__titulo {
    font-size: 1rem;
    margin-bottom: 0;
    font-weight: 400;
    text-wrap: wrap;
}

.clase-nav__bloque-titulo {
    font-size: var(--font-medium-small);
    color: var(--clr-primary);
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
    padding: 0.75rem 0.75rem;
    background-color: var(--clr-bg-lightblue);
    text-wrap: wrap;
    margin: 0;
}

.clase-nav__tipo {
    font-size: var(--font-small);
    color: var(--clr-text-light);
}

.clase-nav__link::after {
    font-family: 'Material Symbols Rounded';
    font-size: 1rem;
    font-weight: 400;
    line-height: 1em;
    color: var(--clr-primary);
    content: '';
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 100vmax;
    border: 2px solid var(--clr-primary);
    background-color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0.75rem;
    z-index: 3;
}

.clase-nav__encuesta::after,
.clase-nav__check::after,
.clase-nav__eval::after {
    background-color: var(--clr-primary);
    color: #fff;
}

.clase-nav__check::after {
    content: '\e5ca';
}

.clase-nav__eval::after {
    content: '\e838';
    font-variation-settings: 'FILL' 1;
}

.clase-nav__encuesta::after {
    content: '\e7f2';
    font-weight: 400;
}

.encuesta-seccion {
    margin-bottom: 1.5rem;
}

.encuesta h4 {
    /* color: var(--clr-text);
    font-size: 1rem; */
    padding: 0.5rem;
    margin-bottom: 1rem;
    border-radius: 0.25rem;
    background-color: var(--clr-bg-lightblue);
}

.evaluacion-resumen {
    border-radius: 0.5rem;
    border: 1px solid var(--clr-border-light);
    margin-bottom: 1rem;
    padding: 1rem;
}

.encuesta-titulo {
    margin-bottom: 0.25rem;

}

.encuesta-pregunta {
    margin-bottom: 1rem;
}

/* Evaluaciones */

.evaluacion-titulo {
    /* color: var(--clr-text);
    font-weight: 400; */
}

.evaluacion-pregunta {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
}

.evaluacion-pregunta__radio {
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
    padding: 0;
    position: relative;
}

.evaluacion-pregunta__radio.form-check .form-check-input {
    opacity: 0;
    display: none;
}



.evaluacion-pregunta__radio.form-check .form-check-label {
    cursor: pointer;
    padding: 0.5rem 0.5rem 0.5rem 3rem;
    border-radius: 0.25rem;
    /* background-color: var(--clr-box-bg); */
    transition: 200ms ease background-color, 200ms ease border;
    border: 2px solid var(--clr-bg-lightblue);
}

.evaluacion-pregunta__radio.form-check .form-check-label:hover {
    background-color: var(--clr-bg-lightblue-hover);
    transition: 200ms ease background-color,
        200ms ease border;
}

.evaluacion-pregunta__radio.form-check .form-check-input:checked+.form-check-label {
    /* color: #fff;
    background-color: var(--clr-primary);
    border: 2px solid var(--clr-primary); */
    font-weight: 450;
    border: 2px solid var(--clr-primary);
    transition: 200ms ease background-color, 200ms ease border;

}

.evaluacion-pregunta__radio .form-check-label::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 0;
    background-color: var(--clr-bg-lightblue-hover);
    font-weight: 600;
    color: var(--clr-text);
    width: 2.5rem;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    text-align: center;
    color: var(--clr-primary);
    transition: 200ms ease background-color;

}

.evaluacion-pregunta__radio.form-check .form-check-input:checked+.form-check-label::after {
    background-color: var(--clr-primary);
    color: #fff;
    transition: 200ms ease background-color;
}

.evaluacion-pregunta__a .form-check-label::after {
    content: 'A';
}

.evaluacion-pregunta__b .form-check-label::after {
    content: 'B';
}

.evaluacion-pregunta__c .form-check-label::after {
    content: 'C';
}

.evaluacion-pregunta__d .form-check-label::after {
    content: 'D';
}

.evaluacion-pregunta__e .form-check-label::after {
    content: 'E';
}

.evaluacion-pregunta__f .form-check-label::after {
    content: 'F';
}

.evaluacion-pregunta__g .form-check-label::after {
    content: 'G';
}

.listado-preguntas ul {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    width: 100%;
    margin-top: 0.5rem;
}

.listado-preguntas ul li {
    flex-basis: calc(20% - 10px);
}

.listado-preguntas ul li a {
    display: block;
    width: 100%;
    text-align: center;
    background-color: var(--clr-bg-lightblue);
    padding: 0.25rem;
    border-radius: 0.25rem;
    border: 2px solid var(--clr-primary);
    text-decoration: none;
    transition: 200ms ease background-color;
}

.listado-preguntas ul li a:hover {
    background-color: var(--clr-bg-lightblue-active);
    transition: 200ms ease background-color;

}

.listado-preguntas ul li a.contestada {
    background-color: var(--clr-primary);
    border: 2px solid var(--clr-primary);
    color: #fff;
}

.evaluacion-nota__final {
    background-color: var(--clr-bg-lightblue);
    display: inline-block;
    border-radius: 0.25rem;
    overflow: hidden;
}

.evaluacion-nota__final small {
    display: block;
    text-transform: uppercase;
    color: #fff;
    padding: 0.5rem;
    margin: 0;
    line-height: 1;
    background-color: var(--clr-primary);
}

.evaluacion-nota__final p {
    font-size: 3rem;
    line-height: 1;
    font-weight: 600;
    color: var(--clr-primary);
    padding: 0.75rem 0.5rem 0.25rem;
    border-radius: 0.25rem;
    margin: 0;
    text-align: center;
}

.panel-tiempo {
    font-size: 2rem;
}

.panel-tiempo .symbols {
    margin-bottom: 5px;
    display: inline-block;
    line-height: 1;
}

/* Navegación usuarios ======================================= */

.nav-usuarios {
    margin-top: -8rem;
    position: relative;
}

.nav-usuarios__porcentaje {
    position: absolute;
    bottom: 1rem;
    background-color: var(--clr-success);
    border-radius: 100%;
    border-radius: 100vmax;
    padding: .25rem 1rem;
    left: 50%;
    transform: translateX(-50%);
    min-width: max-content;
}

.nav-usuarios__porcentaje small {
    display: block;
    color: #fff;
    line-height: 1em;
}

.nav-usuarios__avatar {
    padding: 1.25rem;
    margin: 0 auto;
    max-width: 256px;
    position: relative;
}

.nav-usuarios__avatar-img {
    position: relative;
    border-radius: 100vmax;
    aspect-ratio: 1;
    background: conic-gradient(var(--clr-success) 60%, #e3ecd6 60%);
    padding: 3px;
}

.nav-usuarios__avatar-img img {
    background-color: rgba(255, 255, 255, .75);
    border-radius: 100vmax;
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.nav-usuarios__nombre {
    color: #fff;
    left: calc(100% + 1.5rem);
    top: 5rem;
    max-width: 620px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
}

/* Cuenta ==================================== */
.cuenta-img {
    max-width: 200px;
    border-radius: 100vmax;
    border: 3px solid var(--clr-primary);
    aspect-ratio: 1;
}

.cuenta-img img {
    border-radius: 100vmax;
    background-color: #f2f2f2;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Mensajes */
.table-mensajes .table-mensajes__no-leido>td {
    background-color: var(--clr-bg-lightblue);
}

.table-mensajes.table-hover>tbody>tr:hover>* {
    background-color: var(--clr-bg-lightblue-hover)
}

/* Reservas de clase */

.reserva-fecha {
	text-align: center;
}

.reserva-fecha .reserva-fecha-icon {
	font-size: 2.5rem;
	font-weight: 300;
	margin-bottom: 0.5rem;
    color: var(--clr-text);
}

.reserva-fecha p {
	font-size: 1.125rem;
}

.reserva-fecha .btn-check {
	position: absolute;
	clip: rect(0, 0, 0, 0);
	pointer-events: none;
}

.reserva-fecha .form-check {
	background-color: #fff;
	border: 2px solid var(--clr-primary);
	border-radius: 0.5rem;
	font-size: 1rem;
	color: var(--clr-primary);
	padding: 0.5rem 1rem;
	display: block;
	width: 100%;
}
.reserva-fecha .form-check:hover {
	background-color: var(--clr-bg-lightblue-active);
}



/* Inscripciones ==================================================== */
/* Pasos */

.bs-wizard {
    margin-bottom: 1.5rem;
}



.bs-wizard>.bs-wizard-step {
    padding: 0;
    position: relative;
}

.bs-wizard>.bs-wizard-step .bs-wizard-stepnum {
    color: var(--clr-text);
    font-weight: 600;
    line-height: 1em;
    padding-top: .25rem;
    font-size: .875rem;
    margin-bottom: .25rem;
}

.bs-wizard>.bs-wizard-step .bs-wizard-info {
    color: var(--clr-text);
    font-size: .875rem;
    padding: 0 .25rem;
}

.bs-wizard>.bs-wizard-step>.bs-wizard-dot {
    position: absolute;
    width: 30px;
    height: 30px;
    display: block;
    background-color: var(--clr-primary);
    top: 1.25rem;
    left: 50%;
    margin-top: -15px;
    margin-left: -15px;
    border-radius: 50%;
}

.bs-wizard>.bs-wizard-step>.bs-wizard-dot:after {
    content: ' ';
    width: 14px;
    height: 14px;
    background-color: #fff;
    border-radius: 50px;
    position: absolute;
    z-index: 10;
    top: 8px;
    left: 8px;
}

.bs-wizard>.bs-wizard-step>.progress {
    position: relative;
    border-radius: 0px;
    height: 8px;
    box-shadow: none;
    margin: 1rem 0;
}

.bs-wizard>.bs-wizard-step>.progress>.progress-bar {
    box-shadow: none;
    background-color: var(--clr-primary);
}

.bs-wizard>.bs-wizard-step.complete>.progress>.progress-bar {
    width: 100%;
}

.bs-wizard>.bs-wizard-step.active>.progress>.progress-bar {
    width: 50%;
}

.bs-wizard>.bs-wizard-step:first-child.active>.progress>.progress-bar {
    width: 0%;
}

.bs-wizard>.bs-wizard-step:last-child.active>.progress>.progress-bar {
    width: 100%;
}

.bs-wizard>.bs-wizard-step.disabled>.bs-wizard-dot {
    background-color: #d1d5db;
}

.bs-wizard>.bs-wizard-step.disabled>.bs-wizard-dot:after,
.bs-wizard>.bs-wizard-step.complete>.bs-wizard-dot::after {
    opacity: 0;
}

.bs-wizard>.bs-wizard-step:first-child>.progress {
    left: 50%;
    width: 50%;
}

.bs-wizard>.bs-wizard-step:last-child>.progress {
    width: 50%;
}

.progress {
    --bs-progress-bg: #d1d5db;
}

/* Wizard mobile */
.wizard-mobile {
    display: flex;
    flex-direction: column;
    margin: 0 0 1.5rem 3rem;
    position: relative;
}

.wizard-mobile-info {
    color: var(--clr-text);
}

.wizard-mobile-num {
    font-weight: 600;
}

.wizard-mobile-line {
    width: 5px;
    background-color: #D1D5DB;
    position: absolute;
    left: -2.4rem;
    bottom: 50%;
    z-index: 0;
    height: 100%;
}

.wizard-mobile-step.active .wizard-mobile-line {
    background-color: var(--clr-primary);
}

.wizard-mobile-step:first-child .wizard-mobile-line {
    height: 0;
}

.wizard-mobile-step {
    padding: .5rem 0;
    position: relative;
}

.wizard-mobile-dot {
    content: '';
    position: absolute;
    left: -3rem;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 100vmax;
    background-color: #D1D5DB;
}

.wizard-mobile-dot::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: .75rem;
    height: .75rem;
    border-radius: 100vmax;
    background-color: #D1D5DB;
    z-index: 2;
}


.wizard-mobile-step.active .wizard-mobile-dot,
.wizard-mobile-step.complete .wizard-mobile-dot {
    background-color: var(--clr-primary);
}

.wizard-mobile-step.active .wizard-mobile-dot::after {
    background-color: #fff;
}

.wizard-mobile-step.complete .wizard-mobile-dot::after {
    opacity: 0;
}

/* Gestión */

.gestion-container {
    background-color: var(--clr-box-bg);
    padding: 1rem 2rem;
    border-radius: 1rem;
}
.gestion-fechas {
    color: var(--clr-text);
}

.gestion-fechas .curso-inicio__item {
    color: var(--clr-text);
}

.gestion-inscritos {
    background-color: #fff;
    display: inline-block;
    border: 2px solid var(--clr-primary);
    border-radius: 0.5rem;
    padding: 1rem 2rem;
    color: var(--clr-primary);
}

.gestion-inscritos p {
    margin-bottom: 0;
}
.gestion-inscritos h3 {
    font-size: 2.5rem;
    line-height: 1em;
    margin-bottom: 0.25rem;
}


/* Media Queries ============================================================ */

@media screen and (max-width: 1200px) {
    .clase-evaluar {
        margin-top: 0;
    }
}

@media screen and (max-width: 991px) {
    .sidebar {
        display: none;
    }

    .clase-evaluar {
        margin-top: 0;
    }

    .listado-preguntas ul li {
        flex-basis: auto;
    }

    .listado-preguntas ul li a {
        width: 4ch;
    }
}

@media screen and (max-width: 767px) {

    /* Home ========================================================= */
    .swiper-testimonios .swiper-testimonios__prev {
        left: 1rem;
    }

    .swiper-testimonios .swiper-testimonios__next {
        right: 1rem;
    }

    p.slide-testimonio__p {
        font-size: 1rem;
        padding: 0 calc(1.25rem + 27px);
    }

    .slide-testimonio__info h4 {
        font-size: 1.25rem;
    }

    .slide-testimonio__info p {
        font-size: 1.125rem;
    }

    #cursos-home {
        max-height: 1300px;
        max-height: 160vh;
    }
}

@media screen and (max-width: 574px) {

    /* Header ========================================================= */
    header .header-logo img {
        max-height: 5rem;
    }

    /* Home ========================================================= */
    #cursos-home {
        max-height: 3100px;
    }

    .slide-testimonio {
        border-radius: 0;
    }

    .container-testimonios {
        padding-left: 0;
        padding-right: 0;
    }

    header .header-mobile__icon img {
        height: 2rem;
        object-fit: contain;
    }

    .ingresar {
        padding: 0 1.25rem;
        display: flex;
        align-items: center;
        height: 2rem;
        gap: .25rem;
        font-size: 1rem;
    }

    .ingresar img {
        display: none;
    }
}

@media screen and (max-width: 360px) {
    .curso-inicio__fecha {
        font-size: 0.875rem;
    }

    .curso-inicio__fecha .symbols {
        display: none;
    }
    .curso-inicio__item {
        gap: 0.75rem;
    }
}