/***************************************************************************************************
********************************ESTILOS GENERALES **************************************************
***************************************************************************************************/

html{
    --colorPrimario: #7209BF;
    --fondoBarraNav :  #edede9;
    --colorNegro: black;
    --colorBlanco: white;
    --colorTerciario: #F72585;
    --colorSecundario: #4361EE;
    --colorPrimarioVarianteClara: #9c88d3;
    --fondoCatalogo: #d9d9d9;
    --fondoInputs: #edede9;
    --fondoOpciones: #E1BEE7;
    --paso1Instructor:  #b8c0ff;
    --paso2Instructor: #c8b6ff;
    --paso3Instructor: #e7c6ff;
    --paso4Instructor: #ffd6ff;
    --textoNoExistente: #757575;
    --solicitudAceptada: #1c9e55;
    --solicitudRechazada:#a73238;
    --solicitudEnProceso: #e9ab0f;
    --boxShadow:dodgerblue;
    --fondoFilter: #dfe2e4;  
    --controls-color: var(--colorPrimario);
    --controls-hover-color: #4c3a50;
    --controls-timeline-color: #36383b;
    --controls-timeline-thumb-color: #340553c2;
    --no-video-color: var(--controls-timeline-thumb-color);
    --fondo-alerta-success: rgb(61, 80, 72);
    --fondo-alerta-warn: rgb(87, 79, 53);
    --fondo-alerta-error: rgb(66, 48, 48);
}

body {
    padding: 0 !important;
}

h1,h2,h3{
    font-family: "Zilla Slab";
}

h3{
    color: var(--colorPrimario);
    font-size: 1.5rem;
    text-align: left;
}

.grid {
    display: grid;
    grid-template-columns: 20% 80%;
    & .secciones {
        margin: 10px 5vw;
    }
}

/*.secciones > div {
    margin-inline: auto;
    width: 80%;
    min-width: 20rem;
    max-width: 50rem;
    text-align: center;
}*/

.puntos button{
    color: var(--colorNegro);
    font-weight: bolder;

   &:hover{
        border: none;
    }

   &:focus{
        border: none;
    }
}

.puntos ul li a, .puntos ul li button{
    font-weight: normal;
    color: var(--colorPrimario);

    &:hover{
        background-color: #f1e4f3;
        border-radius: 5px;
        color: var(--colorPrimario);
    }
}

.enProgreso{

    background: repeating-linear-gradient(45deg, black 20% , yellow 20% 40%, black 40% 60%) ; 
    height: 100px; 

}


.form-floating :is(input,textarea){
    border: none;
    background-color: var(--fondoInputs);
} 


.input-group {
    max-width: unset;

    & select{
        border: none;
        background-color: var(--fondoInputs);
        padding: 1rem;
        width: 100%;
    }
}

.form-floating :is(input,textarea):focus{
    border-bottom: 1px solid var(--colorPrimario) !important;
    background-color: var(--fondoInputs);
}

.form-floating :is(input,textarea):focus + label{
    color: var(--colorPrimario) !important;  
    &::after{
        --bs-body-bg: transparent;
    }
}

.boton{
    border: 2px solid var(--colorPrimario);
    color: var(--colorPrimario);

    &:hover, &:focus {
        color: var(--colorBlanco);
        background-color: var(--colorPrimario);
    }
}

.form-check-input:checked {
    background-color: var(--fondoOpciones);
    border-color: var(--fondoOpciones);
}

.tabla{
    overflow-x: visible;

    & td{
        margin: 0;
        font-weight: 400;
        font-family: "Ubuntu";
        font-size: 0.9rem;
        margin-left: 1.8vw;
        margin-top: 5vh;
        vertical-align: middle;
    }

    & .encabezado th {
       color: var(--colorPrimario)!important;
    }
    & .subencabezado th {
        font-size: 0.8em;
    }

    & .nombre{
        font-weight: bold;
        margin: 0;
    }

    & .creado,
    & .actualizado,
    & .userName{
        margin: 0;
        font-size: 0.8rem;
    }
    & .table.mt-5 .tbody tr td .infoActividad{
        background-color: var(--colorSecundario);
    }
    
}

.filter {
    gap: 10px;
    & .btn-group{
        height: fit-content;
        background-color:  var(--fondoFilter)
    }
     
    & .btn-check:checked + .btn {
        background-color: var(--paso2Instructor) !important;
        border: none;
        color: var(--colorPrimario);
    }
}

/*************************************************************************************************************
*****************************************BIENVENIDA GENERAL -************************************************
************************************************************************************************************/

/* Barra de navegacion estilos*/
.nav, .opciones {
    background-color: var(--fondoBarraNav);
    & a {
        --bs-nav-link-color: var(--colorNegro);
        font-family: "Ubuntu Condensed";

        &:hover {
            color: var(--colorPrimario) !important;
        }
        &:hover, &[aria-selected="true"] {
            color: var(--colorPrimario);

            & svg, & path {
                fill:  var(--colorPrimario);
            }
            & g {
                stroke: var(--colorPrimario);
            }
        }
        &[aria-selected="true"] {
            background-color: var(--fondoOpciones);
        }
    }
}

/* banner */

.banner div {
    color: var(--colorBlanco); 

   & h1{
        font-size: 14vw;
     }

    & p{
        font-family: "Ubuntu Condensed"; 
        font-size: 2.5vw;
     }
}

#infoInstructor{
    color: var(--colorPrimario);
    text-decoration: none ;
}

.info p {
    font-size: 1.2rem;
}

.luaInfo {
    color: var(--colorBlanco);
}

.catalogo h1{    
    font-size: 6vw;
    & p {
        font-family: "Ubuntu";
        font-size: 1.5vw;
    }
}

.subrayado {
    background-color: var(--colorPrimario);
    width: 15vw;
    height: 0.3vw;
    border-radius: 50% / 100%;

     & p{
        color: transparent;
     }
}


.catalogo .cursos a{
    background-color: var(--fondoCatalogo);
    color: var(--colorNegro);
}

.btn-catalogo a{
    background-color: var(--fondoCatalogo);
    color: var(--colorNegro);
}

.cursos a{
    color:var(--colorPrimario);
    
    &:hover
    {
        color: var(--colorTerciario);
    }
}

.modal-curso p{
    font-family: "Ubuntu Condensed";
    color: #4361EE;
}

#modal_eliminar .modal-body, #modal_agregar_carrito .modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    & img {
        width: 300px !important;
        height: 300px;
        object-fit: cover;
        margin: 20px;
    }
    & .botones-cursos {
        width: 100%;
        gap: 10px;
    }
}

#modal_comprobante {
    position: absolute;
    left: calc(50% - 250px);
    width: 500px;
    align-self: center;
    margin: auto;
    & .input-group {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    & input[type="file"] {
        display: none;
    }
    & img {
        width: 100px;
    }
}

/* final */
.final div {
    color: var(--colorNegro);
} 

.final .texto h2 {
    font-size: 5vw;
    & p{
        font-family: "Ubuntu condensed";
        font-size: 2vw;
    } 
} 

.footer div {
    background-color:var(--colorNegro); 

    & i {
        color: var(--colorBlanco);
    }
    
    & p{
        color: var(--colorBlanco);
        font-size: 1rem;
    }

    & a{
        color: var(--colorBlanco);
        font-size: 1rem;

        &:hover{
            color:var(--colorTerciario);
        }
    }
}

/*Modales de iniciar sesion y crear cuenta*/

.modal-header {
    border-bottom: transparent !important;
}

.modal-footer {
    border-top: transparent !important;
}

#staticBackdrop2 #apellidos input{
    width: 99%;
}

@media (max-width:  990px) {
    .logo-buho{
        display: none;
    }
    .logo-buho2{
        display: none;
    }

    .footer{
        display: none;
    }
}

/***************************************************************************************************
******************************** BIENEVEINDA USUARIO **************************************************
***************************************************************************************************/
.nav-principal .titulo{
    font-family: "Zilla Slab";
    font-size: clamp(20px, 2vw, 30px);
}

.search-bar input{
    font-family: "Ubuntu";
}

.form-control {
    border: 1px solid #ced4da;

    &:focus{
        box-shadow: none !important; 
        outline:none !important;
        border-color:  #ced4da !important;
    }
} 

.btn-buscar {
    margin-left: 1vw;
}

.infoInstructor {
    width: max-content;
    margin-right: 1em;
    display: flex !important;
    justify-content: center;
    align-items: center;
    
    &:hover{
        color: var(--colorTerciario);
    }
}

[data-role="foto_perfil"] {
    width: 40px;
    height: 40px;
}

@media (min-width:  1300px) {
    .search-bar{
        margin-left: 20vw !important;
    }
   
}

div.banner-principal {
    --bs-card-height: calc(100vh - 75px );

    & img{
        object-fit: cover;
        object-position: bottom;
        height: 100%;
    }

    & .texto {
        text-align: center;
        width: max(450px, 50%);
        margin-top: 20vh;
    }

    & h1 {
        font-size: clamp(55px, 7vw, 120px);
    }

    & p {
        font-size: clamp(16px, 2vw, 34px);
        font-weight: bold;
    }

}

.navbar-nav .infoPerfil:first-of-type{
    margin-right: 2vw;
}  

.infoPerfil .infoInstructorPerfil:hover{
    color: var(--colorTerciario);
}

/************************************************************************************************************************
****************************************BARRA LATERAL ******************************************************************
***********************************************************************************************************************/

.logout li a{
    color: var(--colorPrimario);

    &:hover{
        background-color: var(--colorBlanco);
        border-radius: 5px;
        color: var(--colorPrimario);
    }
}

.card {
    & img {
        object-fit: cover;
    }
}

/*************************************************************************************************************************
******************************************MENU DE HAMBURGUESA INICIO SESION ***********************************************************
************************************************************************************************************************/

.bar-nav .menu-burger li a {
    font-family: "Ubuntu";
    &:hover{
        color: var(--colorPrimario);
        background-color: var(--fondoOpciones);
        border-radius: 15px;
    }
}


/**************************************************************************************************************************
********************************************MODAL INFO INSTRUCTOR *********************************************************
**************************************************************************************************************************/

.tituloInfo{
    color: var(--colorPrimario);
}

.contenedorPasos {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    place-items: stretch;
    gap: 1em;
}

.paso1 {
    background-color: var(--paso1Instructor);
    border-radius: 18px;  
}

.paso2 {
    background-color:var(--paso2Instructor);
    border-radius: 18px; 
}

.paso3 {
    background-color: var(--paso3Instructor);
    border-radius: 18px;
}

.paso4{
    background-color: var(--paso4Instructor);
    border-radius: 18px; 
}

/****************************************************************************************************************************
***************************************INPUT INFORMACION PERSONAL ***********************************************************
****************************************************************************************************************************/
#perfil {
    & .forms .form-floating input {
        border: none;
        background-color: var(--fondoBarraNav);
    }
    & .div-btn {
        display: flex;
        justify-content: end;
    }
}

.foto_circulo {
    width: 200px; 
    height: 200px; 
    border-radius: 50%; 
    display: inline-block;
    border: 1px solid black;
    object-fit: cover;
}

/****************************************************************************************************************************
***************************************CARRITO ***********************************************************
****************************************************************************************************************************/
#carrito_compras {
    & h2 {
        text-align: center;
        margin-top: 3rem;
    }

    & .card_container {
        & .card {
            position: relative;
            background-color: var(--fondoBarraNav);
            max-width: 540px;
            flex-direction: column;
    
           & .curso-img {
                max-width: 12rem;
                
              &  img {
                    object-fit: fill;
                }
            }
    
           & .card-body{
                display: flex;
                justify-content: center;
                flex-direction: column;
            }
    
            & h5 {
                font-weight: 300;
            }
        }
    }
}


@media (max-width :1290px) {
    #carrito_compras .card_container .card {
        .delete{
            position:static;
            display: flex;
            justify-content: end;
            padding-right: 0.1rem;
            padding-bottom: 0.1rem;
        }
    }

}

 #carrito_compras .botones-cursos {
    display: flex;
    justify-content: end;
    margin-left: 20vw;
}

/****************************************************************************************************************************
***************************************ORDENES***********************************************************
****************************************************************************************************************************/

#conOrdenes {
    padding: 4rem;
    & .titulos th{
        color: var(--colorPrimario);
    }
}
/****************************************************************************************************************************
***************************************CURSOS ALUMNO***********************************************************
****************************************************************************************************************************/

#inscripciones {
    margin-top: 7vh;
}

.tarjetasCursos .cursos {
    text-decoration: none;
    display: block;
    width: fit-content;
    margin: auto !important;

    & .progress .progress-bar{
        background-color:var(--colorPrimario);
    }

    & .progreso{
        font-size: 0.8rem;
    }
}

.tarjetasCursos .col:not(:last-child) {
    margin-bottom: 1rem;
}

.progresoCurso{
    text-align: center;
}

& .card .card-body p{
    font-family: "Ubuntu";
}

.temasCurso {
    & h2 button{
        font-family: "Ubuntu Condensed" !important;
    }

    & .accordion-body .listaSubtemas {
        & :first-child {
            border-top: transparent;
        }
        
        & :last-child {
            border-bottom: transparent;
        }

        & li {
            border-inline: transparent;
            text-align: left;
            padding: 0.5rem;    
            & a {
                color: var(--colorPrimario) !important;
                text-decoration: none;
                text-align: left;

                &:hover{
                    color: var(--colorTerciario)!important;
                }
            }
        }
    }

    & .accordion-button:not(.collapsed){
        background-color:var(--colorBlanco);
    }
}

.accordion-secundary{
    --bs-accordion-border-color: transparent;

    & .accordion-item h2 button{
        font-family: "Ubuntu" !important;
        color: var(--colorPrimario);
        font-size: 1rem;
    }

    & .accordion-item{
        border-color: transparent;
    }
}

.temasCurso  .accordion-body .listaSubtemas .accordion-secundary .accordion-body .listaSubtemasSecundaria li a {
    color: var(--colorSecundario) !important;
    &:hover{
        color: var(--colorTerciario) !important;
    }
}

/****************************************************************************************************************************
***************************************TEMAS***********************************************************
****************************************************************************************************************************/
#tema {
    padding: 0 10%;
    & .descripcionTema {

        margin: 0;
        width: 100%;
        & h2 {
            padding-top: 5vh;
        }

        & p {
            font-family: "Ubuntu";
            text-align: justify;
            font-size: 1.2rem;
        }

        & .listaRecursos {
            text-align: left;
        
            & li {
                list-style-type: none;
                display: inline-block;
                padding-right: 1rem;
                text-wrap: nowrap;
            }
        
            & a {
                text-decoration: none;
                font-size: 1.2rem;
                &:hover{
                    color:var(--colorTerciario);
                }
            }
        }
    }

    & .videoTema {
        background-color: grey;
        align-self: center;
        width: 100%;
        height: fit-content;
        border-radius: 10px;
        display: flex;
        overflow: hidden;

        video-dash {
            width: 100%;
        }
    }
}

@media (max-width: 535px) {
    .listaRecursos {
        font-size: 1rem;
    }
}
    
/****************************************************************************************************************************
***************************************SOLICITUDES***********************************************************
****************************************************************************************************************************/

.fondo_burbujas{
    background-image: url("img/burbujas_lado.svg"),
                    url("img/burbujas_centro.svg"),
                    url("img/burbujas_lado2.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left 25% center, center, right 25% center;

    & h2{
        font-size: 2.5rem;
    }
}

@media (max-width : 600px) {
    .fondo_burbujas h2 {
        font-size: 2rem;
    }
}

.opcionesSolicitudes {
    margin-top: 12vh;

    & .container  a {
        color:var(--colorPrimario);
        font-weight: 500;

        &:hover {
            font-weight: bold;
        }
    }
}

#solicitudNueva h2 {
    text-align: center;
    margin-top: 2vh;
}

.infoCurso .row .columnaDer button {
    background-color: var(--colorPrimario) ;
    color: var(--colorBlanco);
    font-family: "Ubuntu Condensed";

    &:hover{
        font-weight: bold;
    }
}

#solicitudEnviada  .tarjetasSolicitudes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    max-width: revert;
    gap: 1rem;

    & a {
        text-decoration: none;
        font-weight: bold;
        cursor: default;
    }

    & p {
        font-weight: 600;
    }

    & .aceptado {
        color: var(--solicitudAceptada) ;
    }

    & .rechazado {
        color: var(--solicitudRechazada);
    }

    & .proceso {
        color: var(--solicitudEnProceso);
    }
}

#solicitud_ver {
    padding: 0 2rem 0 10rem;

    & .videoPiloto{
        background-color: grey;
        width: 90%;
        margin: auto;
        border-radius: 20px;
        overflow: hidden;
    }

    & infoSolicitudEnviada {
        margin-left: 10vw;
    }

    & .encabezado {
        color: var(--colorPrimario);
        font-family: "Ubuntu Condensed";
        display: inline;
        font-size: 1.2rem;
    }

    & .contenido {
        font-family: "Ubuntu";
        display: inline;
        font-size: 1rem;
        margin-top: 0.2rem;
    }
}

@media (max-width : 600px) {
    #solicitudNueva .titulo {
        margin-top: 5vh;
        font-size: 2rem;
    }
    .infoCurso .row label {
        font-size: 0.8rem;
    }
    #editarSolicitud {
        margin-top: 5vh;
        font-size: 2rem;
    }
}

@media (max-width:720px) {
    .tarjetasSolicitudes {
        flex-direction: column;
        max-width: 12rem; 
    }
    .tarjetasSolicitudes .card {
        margin-left: 12vw;
    }
}

@media (max-width:990px) {
    .btn-editar {
        margin-right: 12vw;
    }
    .infoInstructor {
        display: none !important;
    }
    .offcanvas {
        & .offcanvas-body {
            width: 100%;
            padding: 20px;
        }
    }
}

/****************************************************************************************************************************
***************************************SOLICITUDES***********************************************************
****************************************************************************************************************************/
#misCursosInstructor {
    & .fondo_burbujas_cursos {
        background-image: url(img/fondo_burbujas_misCursos.png); 
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;

        & h2 {
            font-size: 2.5rem;
        }
        
        & h5 {
            color: var(--colorPrimario);
        }
    }

    & .tarjetasCursosInstructor {/*
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
        max-width: revert;
        gap: 1rem;*/

        & .card {
            & h4{
                font-size: 1rem;
            }
        }
    }
}
/*
@media (max-width:720px) {
    .tarjetasCursosInstructor {
        flex-direction: column;
    }
}*/

#accordionExample {
    width:45vw;
}

@media (max-width:1000px) {
    #verCursoInstructor .temasCurso {
        margin-left: 12vw;
    }
    #accordionExample {
        width:60vw;
    }
}

.infoCurso {
    display: flex;
    padding: 0 3rem 0 3rem;
    gap: 20px;

    & img {
        width: 250px;
        aspect-ratio: 1;
        object-fit: contain;
    }
    
    & .encabezado {
        color:var(--colorPrimario);
        display: inline;
    }

    & .btn-opciones {
        display: flex;
        justify-content: space-between;
        align-items: center;

        & .form-check input:checked {
            box-shadow: none;
            border-bottom: none !important;
            --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2 var(--colorPrimario);/%3e%3c/svg%3e")
        }
    
        & .form-check label {
            font-size: 0.9em;
        }
    }
}

.modal #enviarInfoTema{
    padding: 1rem 4rem 1rem 4rem;
}

  /****************************************************************************************************************************
***************************************ADMINISTRACION***********************************************************
****************************************************************************************************************************/
.menuAdmin {
    & .card-ancla{
        text-decoration: none;
        color:var(--colorNegro);
        display: block;

        & .card {
            height: 100%;
        }
    
        & .card-body{
            display: flex;
            flex-direction: column;
            justify-content: end;
        }
        
        & h5 {
            color: var(--colorPrimario);
            font-size: 1.4rem;
            margin-top: 1vh;
            flex-grow: 1;
        }
    
        & p {
            font-size: 0.8rem;
            margin: 0;
            text-align:center;
        }
    }

    & .card:hover {
        box-shadow: 0 0 5px var(--boxShadow);
    }
}

#crearTemaCurso #enviarInfoTema {
    max-width: 50vw;
    margin-top: 2vh;
    align-items: center;
    margin-left: 12vw;
}

#crearTemaCurso .btn-crearTema {
   margin-top: 2rem;
}

/***********************************************************************************************************/
/*******************************************Admin cursos****************************************************/
/***********************************************************************************************************/

.user .foto_circulo {
    width: 50px;
    height: 50px;
}

.foto_circulo_contenedor {
    display: flex;
    align-items: center;
    align-content: end;
}

@media (max-width:560px) {
    div.tabla-cursos {
        width: auto;
    }
}

#modal_inscripciones, #modal_cursos_inscritos, #modal_cursos_impartidos {
    max-width: unset;
    width: 100%;
    & .filter {
        margin-right: 1rem;
        & .btn-group {
            & label {
                font-size: 0.7rem;
            }
        }
    }

    & .modal-content {
        padding: 10px;

        & h5 {
            margin-left: 1em;
        }
    }

    & * {
        --bs-modal-width: 60vw;
    }

    & .imagen_curso_fila {
        border-radius: 10px;
        border: 2px solid var(--colorPrimario);
        width: 80px;
    }

    & .modal-body {
        max-height: 100vh;
        overflow: auto;
    }
}
     

#administradorUserInscripciones {
    & .permisos {
        & .form-switch {
            margin: auto;
        }
        & input {
            appearance: none;
            border: none;
            border-radius: 0;
            background: gray;
            width: 1.5rem;
            height: 1.5rem;
            mask-size: contain;
            mask-repeat: no-repeat;
            mask-position: center;

            &:hover {
                cursor: pointer;
            }
        }
        & div:nth-child(1) input { mask-image: url(img/superUsuario.svg); mask-size:90%;}
        & div:nth-child(2) input { mask-image: url(img/usuarioStaff.svg); mask-size: 80%;}
        & div:nth-child(3) input { mask-image: url(img/calificarCursos.svg);}
        & div:nth-child(4) input { mask-image: url(img/enviarSolicitudes.svg); mask-size: 80%;}
        & div:nth-child(5) input { mask-image: url(img/esActivo.svg);  mask-size: 90%;}
    }
    & .form-check-input:checked {
        background-color: var(--colorTerciario);
    }
    & .form-check {
        text-align: center;
    } 
}

#modal_cursos_inscritos, #modal_cursos_impartidos {
    max-width: unset;
    width: 100%;
    & .filter {
        margin-right: 1rem;
        & .btn-group {
            & label {
                font-size: 0.7rem;
            }
        }
    }
}

#ordenesAdministrador {
    & .ordenPalomita {
       display: none;

       & + label {
        color: var(--textoNoExistente);
        font-size: 1.5em;
       }
       &:checked + label {
        color: var(--colorTerciario);
       }
    }
}

#solicitudAceptada {
    color: var(--solicitudAceptada);
    font-size: 1.5em;
}

#solicitudRechazada {
    color: var(--solicitudRechazada);
    font-size: 1.5em;
}

#solicitudProceso {
    font-size: 1.5em;
    color: var(--solicitudEnProceso);
    font-family: "FreeSerif";
}

table .roculto {
    &> td {
        color: rgb(160, 160, 160);
    }
    & img {
        filter: opacity(40%);
    }
}

/*********************OCULTAR SESIONES*********************/
.tabla-cursos {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 20px;
}

@media screen and (min-width: 1560px) {
    .tabla-cursos {
        grid-template-columns: repeat(5, auto);
    }
}

.video-preview {
    width: 90%;
    margin: 10px 0;
    aspect-ratio: 16/9;
    background-color: black;
    border-radius: 5px;
}

.card #imagen, #carta_inscripcion_imagen {
    width: 100%;
    aspect-ratio: 1;
}

a .card {
    cursor: pointer;
}

#curso .accordion-body {
    text-align: left;
}

#instructor img {
    width: 30%;
    align-self: center;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 10px;
}

textarea.form-control {
    height: 10rem !important;
    resize: none;
}

a.nav-link, a.dropdown-item {
    cursor: pointer;
}

.dropdown-menu[data-bs-popper] {
    left: calc(-100% - 6rem);
}

#vercurso_imagen {
    width: 250px;
    margin: 10px;
}

.card_container {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    & * {
        text-decoration: none;
    }
}

.hide {
    display: none !important;
}

.card_container_presentacion {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(3, minmax(220px, 20vw));
    width: fit-content;

    & * {
        text-decoration: none;
    }
}

@media (max-width: 830px) {
    .card_container_presentacion {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        
        & .card {
            width: 300px;
        }
    }
}

.menuAdmin {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    & * {
        text-decoration: none;
    }
    & .card-body {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 160px;
    }
}

.carta_solicitud > .card-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    aspect-ratio: 8/9;
}

.breadcrumb {
    border-radius: 8px;
    background-color: var(--fondoBarraNav);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: max-content;
    
    & > ul {
        display: flex;
        list-style: none;
        margin: auto;
        padding: 0;

        & > li:nth-child(n)::after {
            font-weight: bolder;
            position: absolute;
            content: '/';
            left: -4px;
            top: 7px;
        }

        & > li:first-child {
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
            &::after {
                content: '';
            }
        }

        & > li:last-child {
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
        }
        
        & > li {
            color: var(--colorPrimarioVarianteClara);
            transition: color 0.3s;
            position: relative;
            &:hover {
                color: var(--colorPrimario);
                & > a {
                    color: var(--colorPrimario);
                }
            }
            & > a {
                color: var(--colorPrimarioVarianteClara);
                transition: color 0.3s;
                display: block;
                padding: 8px 10px;
                text-decoration: none;
                font-weight: 500;
            }
        }
    }
}

.error_page {
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    gap: 2em;
    display: flex;
    flex-direction: column;

    & > header {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;

        & > img {
            width: 200px;
        }
    }

    & > main {
        width: 80%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    & h1 {
        font-size: clamp(55px, 7vw, 120px);
        color: var(--colorPrimario);
    }

    & h2 {
        color: var(--colorPrimario);
        font-size: clamp(20px, 3vw, 40px);
    }
}

.modal_login {
    z-index: 102;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    & > form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;

        & h4{
            font-size: 1.8rem;
            font-family: "Zilla Slab";
        }
    
        & h5{
            font-size: 1rem;
            font-family: "Ubuntu condensed";
        }
    
        & a{
            color: var(--colorPrimario);
            text-decoration: none;
            font-family: "Ubuntu";
            font-size: 0.6rem;
            float: inline-end;
    
                &::hover{
                    cursor: pointer;
                    text-decoration: underline;
                }
        }
    
        & .btn:hover{
            color: white;
            background-color: var(--colorTerciario);
            cursor: pointer;
        }
    }        

    & img {
        width: 220px;
    }
}

.modal .boton {
    display: block;
    margin: auto;
}

.navbar {
    z-index: 100;
    position: sticky;
    top: 0;
    display: flex !important;
    justify-content: flex-end !important;

    & #navbarNav {
        align-items: flex-end;
    }
}

.breadcrumb {
    position: sticky;
    top: 100px;
}

.opciones a {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 15px;
    gap: 10px;

    & svg {
        width: 24px;
        height: 24px;
        fill: black;
    }

    &:focus, &:hover {
        color: #000;
        background-color: var(--fondoOpciones);
    }

    &:focus{
        color: var(--colorPrimario);
        background-color: var(--fondoOpciones);
        border-radius: 15px;
    }
}

@media (max-width:  1200px) {
    .barra-lateral a > span {
        display: none;
    }
}

.barra-lateral {
    width: 100%;
    height: max-content;
    position: sticky;
    top: 80px;
    padding: 30px 20px;
}

.opciones {
    & ul {
        gap: 10px;
    }
    & .nav-item a {
        display: flex;
        align-items: center;
        text-decoration: none;
        position: relative;
        width: 100%;
        gap: 10px;
    }
}

.opciones, .opciones > .nav {
    background-color: transparent;
}

@media (max-width :1200px) {
    .grid .secciones {
        margin: 10px 90px 10px 10px;
    }
    .barra-lateral a {
        width: 40px !important;
        justify-content: center;
    }
    .grid {
        grid-template-columns: 80px calc(100% - 80px);
    }
}

@media (max-width: 767px) {
    .fondo_burbujas h2 {
        font-size: 2rem;
    }
    .grid {
        grid-template-columns: 100%;
    }
    .grid .secciones {
        margin: 5vw;
    }
    .barra-lateral {
        display: none;
    }
    #menu_login_ordenador {
        display: none !important;
    }
    .search-bar {
        flex-grow: 1;
        flex-basis: auto !important;
    }
}

@media (min-width: 768px) {
    #btn_iniciar_sesion_ordenador {
        display: block !important;
    }
}

.contenedor_vacio {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    & h2 {
        color: var(--textoNoExistente);
    }

    & img {
        width: 100px;
        height: 100px;
        filter: invert(50%) sepia(5%) hue-rotate(180deg);
    }
}

#vertema_video_dash_container {
    overflow: hidden;
    border-radius: 8px;
}

.contenedor-etiquetas {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 10px;
    overflow: hidden;
    border-radius: 8px;
    flex-direction: column;
    background-color: var(--fondoInputs);

    & > div {
        display: flex;
        gap: 10px;
    }
}

.etiqueta {
    min-width: 100px;
    border-radius: 16px;
    border: 2px solid var(--colorPrimario);
    background-color: transparent !important;
    color: var(--colorPrimario) !important;
    transition: background-color 0.3s;

    &:hover {
        background-color: var(--colorPrimario) !important;
        color: white !important;
    }
}

.filtro-etiquetas {
    width: 100%;
    display: flex;
    gap: 10px;
    margin-bottom: 1.5em;

    & > div {
        padding: 10px;
        width: calc(100% - 215px);
        display: flex;
        align-items: center;
        overflow-x: auto;
        gap: 10px;
    }
}

.lua-icon svg {
    width: 60px;
    aspect-ratio: 1;
}

.icon-big svg {
    width: 100px;
    height: 100px;

    & path {
        fill: var(--textoNoExistente);
    }
}

.icon-small, .icon-small-out {
    min-width: 40px;
    height: 40px;
    display: flex;
    padding: 5px;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background-color: transparent;
    transition: background-color 0.3s;
    border: none;
    gap: 10px;
    color: var(--bs-gray);

    & svg {
        width: 30px;
        height: 30px;
        cursor: pointer;
    }
    
    &:hover {
        color: var(--colorPrimario);
        background-color: var(--fondoOpciones);
    }
}

.icon-small {
    & path {
        fill: var(--bs-gray);
    }
    &:hover {
        & path {
            fill: var(--colorPrimario);
        }
    }
}

.icon-small-out {
    & path {
        stroke: var(--bs-gray);
    }
    &:hover {
        & path {
            stroke: var(--colorPrimario);
        }
    }
}

.card {
    transition: border-color 0.3s;

    &:hover {
        border-color: var(--colorPrimario);
        box-shadow: 0 0 5px var(--colorPrimarioVarianteClara);
    }

    & .card-body {
        padding: 16px;
        background-color: var(--colorBlanco);
        border-radius: inherit;    
    }
}

.floating {
    width: 100%;
}

.card-foot-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-evenly;

    & > .btn-buscar {
        margin: 0;
        color: var(--bs-gray);

        & * {
            color: var(--bs-gray);
        }
        &:hover {
            border: 1px solid var(--colorPrimario);
            color: var(--colorPrimario);
            
            & * {
                color: var(--colorPrimario);
            }
        }
    }

    & > button {
        width: max-content;
        margin: 0;
    }
}

#confirmar_mensaje_error, #confirmar_mensaje_confirmación {
    display: none;

    &.show {
        display: block;
    }
}

#video_preview_upload_container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 250px;
    height: calc(max-content + 100px);
    border-radius: 10px;
    box-shadow: 0 0 5px var(--colorPrimario);
    background-color: var(--colorBlanco);
    overflow: hidden;
    z-index: 110;
    transition: border-color 0.3s ease-in-out;
    box-sizing: border-box;

    &.hide {
        display: none;
        width: 0;
        height: 0;
    }

    & > div.expander-button {
        height: max-content;
        padding: 10px;
        gap: 10px;
        box-sizing: border-box;
        justify-content: space-between;
        align-items: center;
        display: flex;
        cursor: pointer;
        border-top: 2px solid transparent;
        transition: border-color 0.3s;

        & > p {
            padding: 0;
            margin: 0;
        }
    }

    & > div.video-containers {
        max-height: 0;
        transition: max-height 0.3s;
        overflow: hidden;
    }

    &:hover {
        & > div.expander-button {
            border-color: var(--bs-gray);
        }

        & > div.video-containers {
            overflow: auto;
            max-height: calc(calc(calc(250px / 9) * 4 + 2.5em) * 3);
        }
    }

    & .video_preview_upload {
        box-sizing: border-box;
        position: relative;
        height: max-content;
        width: 100%;
        box-shadow: 0 0 5px transparent;
        overflow: hidden;
        cursor: pointer;
        transition: background-color 0.3s, height 0.3s;

        &::after {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            content: '';
        }

        & > video {
            display: block;
            width: inherit;
            aspect-ratio: 19/9;
            object-fit: cover;
        }

        & > .progress {
            width: 100%;
            height: 4px;
            border-radius: 0;
        }

        & > .text {
            box-sizing: border-box;
            padding: 0;
            margin: 5px;
            width: 100%;

            & > span {
                display: block;
                width: max-content;
                height: 1em;
                line-height: 1em;
            }
        }

        &:hover::after {
            display: flex;
            justify-content: center;
            align-items: center;
            content: 'Detalles';
            color: var(--colorBlanco);
            background-color: rgba(0, 0, 0, 0.4);
        }
    }
}

.progress .progress-bar{
    background-color:var(--colorPrimario);
}

.modal {
    & video {
        width: 80%;
        height: 350px;
        border-radius: 10px;
        overflow: hidden;
        border-radius: 2px solid var(--colorPrimarioVarianteClara);
    }
    & div.metadatos {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 20px;

        & > p {
            font-size: 1em;

            & > span {
                color: var(--bs-gray);
            }
        }
    }
}

.curso_perfil_contenedor {
    display: flex;
    justify-content: flex-start;
    height: max-content;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 1.5em;

    & > .card {
        width: max(200px, 20%);
    }

    & > span.mensaje {
        width: 100%;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-weight: bold;
    }
}

.tag {
    width: 200px;
    text-align: center;
    border-radius: 1em;
    border: none;
    color: white;

    &[data-role=administrador] {
        background-color: var(--bs-success-border-subtle);
    }
    &[data-role=instructor] {
        background-color: var(--bs-info-border-subtle);
    }
    &[data-role=usuario] {
        background-color: var(--colorPrimarioVarianteClara);
    }
}

input-element {
    width: 100%;
}

fieldset {
    border: none;
    position: relative;
    width: 100%;
    outline: none;
    height: 40px;
    margin-bottom: 2em;

    &.textarea {
        height: 10rem;
    }

    & > input {
        font-size: 14px !important;
    }

    & > textarea {
        font-size: 14px !important;
    }

    & > label {
        cursor: text;
        position: absolute;
        border-radius: 10px;
        background-color: transparent;
        color: transparent;
        font-size: 14px;
        padding: 2px 10px;
        top: 5px;
        left: 3px;
        transition: background-color 0.3s, top 0.3s, color 0.3s;
    }

    & > input:focus + label, & > textarea:focus + label,
    &.error > label, &.success > label {
        background-color: white;
        color: #7209BF;
        top: -18px;
    }
    
    &::before {
        position: absolute;
        content: attr(data-before);
        top: 100%;
        line-height: 13px;
        left: 8px;
        width: calc(100% - 16px);
        height: max-content;
        font-size: 10px;
        color: transparent;
        transition: color 0.3s;
    }

    &.error::before {
        color: var(--solicitudRechazada);
    }

    &.success::before {
        content: 'Completado';
        color: var(--solicitudAceptada);
    }
}

#componente_alerta {
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    background-color: white;
    position: fixed;
    left: 0;
    right: 0;
    top: -150px;
    margin: auto;
    border-radius: 10px;
    display: grid;
    gap: 5px;
    align-items: center;
    justify-content: center;
    grid-template-columns: 20% 1fr;
    grid-template-rows: 1em 1fr;
    grid-template-areas:
        "i t"
        "i m";
    z-index: 1100;
    transition: width 0.2s ease-in-out, height 0.2s ease-in-out, top 0.2s;
    border: 2px solid var(--fondoOpciones);

    &.show {
        width: 300px;
        height: 100px;
        top: 10px;
        padding: 10px 5px;
    }

    &::after {
        content: attr(data-message);
        grid-area: m;
        font-size: 0.8em;

        &::after {
            content: 'XD';
        }
    }

    &::before {
        content: attr(data-title);
        grid-area: t;
        font-weight: bold;
    }

    & > icon-element {
        justify-self: center;
        grid-area: i;
        & > svg {
            width: 35px;
            height: 35px;
        }
    }

    &[data-type=success] {
        &::after {
            color: var(--fondo-alerta-success);
        }
        &::before {
            color: var(--solicitudAceptada);
        }
        & * {
            stroke: var(--solicitudAceptada);
            fill: var(--solicitudAceptada);
        }
    }

    &[data-type=warn] {
        &::after {
            color: var(--fondo-alerta-warn);
        }
        &::before {
            color: var(--solicitudEnProceso);
        }
        & * {
            stroke: var(--solicitudEnProceso);
        }
    }

    &[data-type=error] {
        &::after {
            color: var(--fondo-alerta-error);
        }
        &::before {
            color: var(--solicitudRechazada);
        }
        & * {
            fill: var(--solicitudRechazada);
        }
    }
}

.oculto {
    display: none;
}

#vertema_video_dash_container {
    display: flex;
    align-items: center;
    justify-content: center;

    & > iframe {
        border-radius: 10px;
        border: 2px solid var(--colorPrimario);
        width: 100%;
        height: min(600px, 50vw);
    }
    & > img {
        border-radius: 10px;
        border: 2px solid var(--colorPrimario);
        width: 70%;
        margin: auto;
    }

    & > video-dash {
        width: 100%;
    }
}

.recursos_adicionales, .listaRecursos {
    display: none;
}

image-input {
    position: relative;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;

    & img {
        display: block;
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
    }

    & input {
        position: absolute;
        display: none;
    }

    & label {
        cursor: pointer;
        top: 0;
        left: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: transparent;
        color: transparent;
        transition: background-color 0.3s, color 0.3s;
        display: flex;
        font-weight: bold;
        justify-content: center;
        align-items: center;
        text-align: center;

        &:hover {
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
        }
    }
}

.formulario-imagen-texto {
    display: flex;
    gap: 3em;
    flex-grow: 1;
    width: 100%;
    align-items: center;

    & .formulario-imagen-texto-texto {
        width: 100%;
    }
}

.botones-cursos > .btn {
    width: max-content;
}

/* Estados de búsqueda */
.estado-cargando, 
.estado-vacio, 
.estado-error {
    text-align: center;
    padding: 2rem;
    margin: 2rem auto;
    max-width: 500px;
    border-radius: 8px;
    background-color: var(--fondoBarraNav);
}

.estado-cargando {
    color: var(--textoNoExistente);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.estado-vacio {
    border: 1px solid var(--colorPrimarioVarianteClara);
}

.estado-error {
    border: 1px solid var(--solicitudRechazada);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(114, 9, 191, 0.1);
    border-top-color: var(--colorPrimario);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.icono-estado svg {
    margin-bottom: 1rem;
}

.estado-cargando h3,
.estado-vacio h3,
.estado-error h3 {
    margin-bottom: 0.5rem;
    color: inherit;
}

.estado-vacio p,
.estado-error p {
    margin-bottom: 1.5rem;
    color: var(--textoNoExistente);
}

.btn-limpiar {
    margin-top: 1rem;
    padding: 0.5rem 1.5rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}