:root {
    --colorEFP: #f0ba05;
    --colorEXU: #00C02C;
    --colorIDI: #2A76C2;
    --colorVOL: #B23FD2;
    --colorVER: #FF8100;
    --colorDEP: #FF3838;
    --colorEMP: #cbe01d;
    --colorFOR: #a09f9f;
    --colorCAB: #B39D57;

    --colorEFPlight: #fbd74f;
    --colorEXUlight: #4bb563;
    --colorIDIlight: #3c7dbd;
    --colorVOLlight: #bd64d6;
    --colorVERlight: #f99a39;
    --colorDEPlight: #f55959;
    --colorEMPlight: #cfdc64;
    --colorFORlight: #c3c2c2;
    --colorCABlight: #d2b968;

    --colorEFPlighter: #a08a33;
    --colorEXUlighter: #90DF7E;
    --colorIDIlighter: #69A0E1;
    --colorVOLlighter: #d57eec;
    --colorVERlighter: #ffb48f;
    --colorDEPlighter: #f49292;
    --colorEMPlighter: #d8e191;
    --colorFORlighter: #c3c2c2;
    --colorCABlighter: #d2b968;
}

/* CSS DE LAS TARJETAS DE LAS CATEGORIAS DE LOS CURSOS */
.label {
    display: inline;
    padding: .2em .4em .2em;
    font-size: 32px;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

.container-cursos {
    margin-top: 40px;
    margin-bottom: 20px;
    margin: 0 auto;
    padding: 0 0;
}

.card {
    margin-top: 12px;
    margin-bottom: 12px;
    color: white;
}

.card .card-img {

    width: 100%;
    height: auto;
}

.card .card-body {
    display: flex;
    flex-direction: column;
    padding-top: 6px;
    height: auto; /* Asegura que el body se ajuste al contenido */
    min-height: 0; /* Evita un alto mínimo fijo */
}

.card .card-left {
    position: relative;
    float: left;
    padding: 0 0 8px 0;
}

.card .card-right {
    position: relative;
    float: left;
    padding: 8px 0 0 0;
}

.card .card-body h1:first-child, .card .card-body h2:first-child, .card .card-body h3:first-child, .card .card-body h4:first-child, .card .card-body .h1, .card .card-body .h2, .card .card-body .h3, .card .card-body .h4 {
    margin-top: 0;
}

.card .card-body .heading {
    display: block;
}

.card .card-body .heading:last-child {
    margin-bottom: 0;
}

.card .card-body .lead {
    text-align: center;
}

@media (min-width: 768px) {
    .card .card-left {
        float: left;
        padding: 0 8px 0 0;
    }

    .card .card-right {
        float: left;
        padding: 0 0 0 8px;
    }

    .card .card-4-8 .card-left {
        width: 33.33333333%;
    }

    .card .card-4-8 .card-right {
        width: 66.66666667%;
    }

    .card .card-5-7 .card-left {
        width: 41.66666667%;
    }

    .card .card-5-7 .card-right {
        width: 58.33333333%;
    }

    .card .card-6-6 .card-left {
        width: 50%;
    }

    .card .card-6-6 .card-right {
        width: 50%;
    }

    .card .card-7-5 .card-left {
        width: 58.33333333%;
    }

    .card .card-7-5 .card-right {
        width: 41.66666667%;
    }

    .card .card-8-4 .card-left {
        width: 66.66666667%;
    }

    .card .card-8-4 .card-right {
        width: 33.33333333%;
    }
}

.div-card-img {
    position: relative;
}

.btn-acceder {
    position: absolute;
    bottom: 45px;
    right: 28px;
    color: white;
    padding: 8px 12px !important;
    border-radius: 20px;
    float: right;
    transition: all 0.2s ease;
}

.btn-acceder:hover {
    color: white;
    padding: 8px 18px !important;
}

.card-cursos-verano {
    background-color: var(--colorVER);
}

.card-cursos-verano .btn {
    background-color: var(--colorVERlighter);
}

.card-cursos-verano .btn:hover {
    background-color: var(--colorVERlight);
}

.card-cursos-verano svg {
    fill: var(--colorVER);
}

.card-cursos-ext-univ {
    background-color: var(--colorEXU);
}

.card-cursos-ext-univ .btn {
    background-color: var(--colorEXUlighter);
}

.card-cursos-ext-univ .btn:hover {
    background-color: var(--colorEXUlight);
}

.card-cursos-ext-univ svg {
    fill: var(--colorEXU);
}

.card-cursos-idiomas {
    background-color: var(--colorIDI);
}

.card-cursos-idiomas .btn {
    background-color: var(--colorIDIlighter);
}

.card-cursos-idiomas .btn:hover {
    background-color: var(--colorIDIlight);
}

.card-cursos-idiomas svg {
    fill: var(--colorIDI);
}

.card-cursos-postgrado {
    background-color: var(--colorEFP);
}

.card-cursos-postgrado .btn {
    background-color: var(--colorEFPlighter);
}

.card-cursos-postgrado .btn:hover {
    background-color: var(--colorEFPlight);
}

.card-cursos-postgrado svg {
    fill: var(--colorEFP);
}

.card-cursos-voluntariado {
    background-color: var(--colorVOL);
}

.card-cursos-voluntariado .btn {
    background-color: var(--colorVOLlighter);
}

.card-cursos-voluntariado .btn:hover {
    background-color: var(--colorVOLlight);
}

.card-cursos-voluntariado svg {
    fill: var(--colorVOL);
}

.card-cursos-deportes {
    background-color: var(--colorDEP);
}

.card-cursos-deportes .btn {
    background-color: var(--colorDEPlighter);
}

.card-cursos-deportes .btn:hover {
    background-color: var(--colorDEPlight);
}

.card-cursos-deportes svg {
    fill: var(--colorDEP);
}

.card-cursos-emprendimiento {
    background-color: var(--colorEMP);
}

.card-cursos-emprendimiento .btn {
    background-color: var(--colorEMPlighter);
}

.card-cursos-emprendimiento .btn:hover {
    background-color: var(--colorEMPlight);
}

.card-cursos-formacion-empleados {
    background-color: var(--colorFOR);
}

.card-cursos-formacion-empleados .btn {
    background-color: var(--colorFORlighter);
}

.card-cursos-formacion-empleados .btn:hover {
    background-color: var(--colorFORlight);
}

.card-cursos-ciencia-abierta {
    background-color: var(--colorCAB);
}

.card-cursos-ciencia-abierta .btn {
    background-color: var(--colorCABlighter);
}

.card-cursos-ciencia-abierta .btn:hover {
    background-color: var(--colorCABlight);
}

@media (max-width: 768px) {
    .div-card-img {
        max-height: 200px;
        overflow: hidden;
    }

    .btn-acceder {
        bottom: 10px;
        right: 22px;
    }

    .card .card-body {
        min-height: 100px;
    }
}

/* CSS DE LAS TARJETAS DE CADA CURSO */
.card-curso {

    background-color: #F4F1F0;
    color: #7d7d7d;
    border: solid 1px #d8d8d8;
/*    height: 470px;*/
}

.top-right2 {
    position: absolute;
 	top: 10px;
    right: 10px;
	z-index: 10;
    padding-right: 8px;
    padding-top: 10px;
}

.center-content {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.div-card-img-cuso {
    position: relative;
    max-height: 334px;
    overflow: hidden;
	 z-index: 5;
}

.div-card-img-cuso img {

    width: 100%;
    height: 100%;
	max-height: 334px;
	min-height:334px;
    object-fit: cover;  /*Mantiene la proporción y llena el contenedor */
}

/*
.div-card-img-cuso > img.card-img {
    object-fit: cover;
    object-position: center;
    height: 20vh;
    min-height: 200px;
}
*/

.linea {
    height: 6px;
    width: 100%;
    position: absolute;
    bottom: 0;
}

.linea-idiomas {
    background-color: var(--colorIDI);
}

.linea-ext-univ {
    background-color: var(--colorEXU);
}

.linea-verano {
    background-color: var(--colorVER);
}

.linea-postgrado {
    background-color: var(--colorEFP);
}

.linea-voluntariado {
    background-color: var(--colorVOL);
}

.linea-deportes {
    background-color: var(--colorDEP);
}

.linea-emprendimiento {
    background-color: var(--colorEMP);
}

.linea-formacion-empleados {
    background-color: var(--colorFOR);
}

.linea-ciencia-abierta {
    background-color: var(--colorCAB);
}

.div-btn-ir-al-curso {
    text-align: right;
    margin-top: auto;
}

.card-curso-title {
    color: #3E4281;
    font-weight: bold;
    font-size: x-large;
	margin-bottom: 8px;
    margin-top: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 25px;
    min-height: 20px;
    max-height: 50px;
}

.etiquetas-curso {
    width: 100%;
    font-size: 15px;
}

.card-curso-descripcion {
    font-size: 18px;
	word-wrap: break-word; /* Permite que el texto se ajuste */
    overflow-wrap: break-word; /* Evita que el texto se desborde fuera del contenedor */
    white-space: normal; /* Permite que el texto se ajuste en varias líneas */
    text-overflow: ellipsis; /* Elipsis si el texto es demasiado largo, pero puedes omitirlo si no lo deseas */
}

.curso-info {
  max-height: none; /* Elimina los límites de altura fijos */
    line-height: normal; /* Se adapta a la cantidad de texto */
    display: block; /* Asegura que los textos sean bloques */
}

.card-curso .card-body {
position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 10px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 10px;
}

.curso-subtitulo {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 22px;
    max-height: 44px;
}

@media (max-width: 768px) {
    .div-btn-ir-al-curso .btn {
        width: 100%;
        padding: 6px 16px;
    }

    .card-curso .card-body {
        min-height: unset;
    }
}