/* Colors i estils */
:root {

    --ifep-blau: #043EA7;
    --blau-fosc: #00163f;
    --blau-cecot: #00B9E9;
    --groc-ifep: #FBC158;
    --lila-ifep: #565CF0;
    --negre: #191919;
    --gris: #F5F5F5;
    --gris-clar: #F8F8F8;
    --gris-mitja: #E0E0E0;
    --blanc: #FFFFFF;

    --ia-primary: #3459ff;
    --ia-secondary: #b10ceb;
    --gradient-ia: linear-gradient(156deg, var(--ia-primary) 0%, var(--ia-secondary) 100%);
    --vermell-clar: #ffebea;
    --thin: 100;
    --ultralight: 200;
    --light: 300;
    --regular: 400;
    --medium: 500;
    --bold: 600;
    --black: 900;
    --altura-linea: 1.3em;





    /* Font Family */
    --font-family: Inter, sans-serif;

    /* Type Scale */
    --display-lg-size: clamp(2.57rem, calc(2.11rem + 2.46vw), 3.84rem);
    --display-lg-weight: 800;
    --display-lg-line-height: 1.5;
    --display-lg-letter-spacing: 0.01em;

    --display-md-size: clamp(2.28rem, calc(1.93rem + 1.86vw), 3.25rem);
    --display-md-weight: 800;
    --display-md-line-height: 1.6;
    --display-md-letter-spacing: 0.015em;

    --h1-size: clamp(2.03rem, calc(1.77rem + 1.38vw), 2.74rem);
    --h1-weight: 600;
    --h1-line-height: 1.2;
    --h1-letter-spacing: 0.015em;

    --h2-size: clamp(1.6rem, calc(1.47rem + 0.69vw), 1.96rem);
    --h2-weight: 600;
    --h2-line-height: 1;
    /* --h2-letter-spacing: 0.02em; */

    --h3-size: 22px;
    --h3-weight: 600;
    --h3-line-height: 1.3;
    /* --h3-letter-spacing: 0.02em; */

    --h4-size: clamp(1.27rem, calc(1.22rem + 0.26vw), 1.4rem);
    --h4-weight: 500;
    --h4-line-height: 1.6;
    /* --h4-letter-spacing: 0.025em; */

    --h5-size: clamp(1.19rem, calc(1.16rem + 0.18vw), 1.29rem);
    --h5-weight: 500;
    --h5-line-height: 1.6;
    /* --h5-letter-spacing: 0.025em; */

    --h6-size: clamp(1.13rem, calc(1.1rem + 0.11vw), 1.18rem);
    --h6-weight: 500;
    --h6-line-height: 1.6;
    --h6-letter-spacing: 0.03em;

    --body-xl-size: clamp(1.06rem, calc(1.05rem + 0.05vw), 1.09rem);
    --body-xl-weight: 400;
    --body-xl-line-height: 1.6;
    --body-xl-letter-spacing: 0.03em;

    --body-size: clamp(1rem, calc(1rem + 0vw), 1rem);
    --body-weight: 400;
    --body-line-height: 1.4;
    /* --body-letter-spacing: 0.03em; */

    --body-sm-size: clamp(0.94rem, calc(0.95rem + -0.05vw), 0.92rem);
    --body-sm-weight: 400;
    --body-sm-line-height: 1.4;
    /* --body-sm-letter-spacing: 0.03em; */

    --caption-lg-size: clamp(0.89rem, calc(0.9rem + -0.08vw), 0.85rem);
    --caption-lg-weight: 400;
    --caption-lg-line-height: 1.4;
    --caption-lg-letter-spacing: 0.03em;

    --caption-size: clamp(0.84rem, calc(0.86rem + -0.12vw), 0.78rem);
    --caption-weight: 400;
    --caption-line-height: 1.3;
    --caption-letter-spacing: 0.03em;

    --caption-sm-size: clamp(0.79rem, calc(0.82rem + -0.15vw), 0.71rem);
    --caption-sm-weight: 300;
    --caption-sm-line-height: 1.7;
    --caption-sm-letter-spacing: 0.03em;

    --overline-size: clamp(0.74rem, calc(0.78rem + -0.17vw), 0.66rem);
    --overline-weight: 500;
    --overline-line-height: 1.7;
    --overline-letter-spacing: 0.03em;

}



/* Estils Generals - grid */

body {
    font-family: var(--font-family) !important;
    background-color: var(--gris-clar);
    margin: 0;
    padding: 0;
}


main {
    /* min-height: 95vh; */
    display: flex;
    flex-direction: column;
}

footer {
    margin-top: auto !important;
}

html,
body {
    height: 100%;
}

/* body > footer {
  position: sticky;
  top: 100vh;
} */

@media (min-width: 991px) {
    body>footer {
        position: sticky;
        top: 100vh;
    }
}


/* Mida de text */


h1 {
    font-size: var(--h1-size);
    font-weight: var(--h1-weight);
    line-height: var(--h1-line-height);
    letter-spacing: var(--h1-letter-spacing);

    margin-bottom: 1rem;

}

h2,
.h2 {
    font-size: var(--h2-size);
    font-weight: var(--h2-weight);
    line-height: var(--h2-line-height);
    letter-spacing: var(--h2-letter-spacing);
    margin-bottom: 0.75rem;
}

h3 {
    font-size: var(--h3-size);
    font-weight: var(--h3-weight);
    line-height: var(--h3-line-height);
    letter-spacing: var(--h3-letter-spacing);
    margin-bottom: 0.5rem;

}

/* .header-contingut {
    font-size: 20px;

} */

h4 {
    font-size: var(--h4-size);
    font-weight: var(--h4-weight);
    line-height: var(--h4-line-height);
    letter-spacing: var(--h4-letter-spacing);
    margin-bottom: 0.5rem;
}

p {
    font-size: var(--body-size);
    font-weight: var(--body-weight);
    line-height: var(--body-line-height);
    letter-spacing: var(--body-letter-spacing);
    margin-bottom: 1rem;


}

.body-xl {
    font-size: var(--body-xl-size);
    font-weight: var(--body-xl-weight);
    line-height: var(--body-xl-line-height);
    letter-spacing: var(--body-xl-letter-spacing);
}

.body-sm {
    font-size: var(--body-sm-size);
    font-weight: var(--body-sm-weight);
    line-height: var(--body-sm-line-height);
    letter-spacing: var(--body-sm-letter-spacing);
}

.caption {
    font-size: var(--caption-size);
    font-weight: var(--caption-weight);
    line-height: var(--caption-line-height);

}

.banner-link {
    text-decoration: none;
}




/* Botons */
/* 1.Boto subrallat */

.btn-link {
    color: var(--ifep-blau);
}

.btn-link:hover {
    color: var(--blau-fosc);
}

/* 2. Tornar enrere */
.tornar-enrere {
    color: var(--ifep-blau);
    font-weight: 700;
    font-size: 17px;
}

.tornar-enrere:hover,
.tornar-enrere:hover path {
    color: var(--negre);
    fill: var(--negre);


}

.icona-tornar {
    width: 12px;
    height: 12px;
}

/* 3. boto barra lateral */

.btn-ap {
    background-color: var(--ifep-blau);
    color: var(--blanc) !important;
}

.btn-ap:hover {
    background-color: var(--ifep-blau);
    color: var(--blanc) !important;
}


/* 4. btn-ifep */

.btn-ifep {
    background-color: var(--ifep-blau);
    color: var(--blanc);
    padding: 5px 20px;

}

.btn-ifep:hover {
    background-color: var(--blau-fosc);
    color: var(--blanc);
}


/* 5. btn-ifep-segon */

.btn-ifep-segon {
    background-color: var(--lila-ifep);
    color: var(--blanc);
    padding: 5px 20px;
}

.btn-ifep-segon:hover {
    background-color: var(--blau-fosc);
    color: var(--blanc);
}


/* 6. btn groc */

.btn-groc {
    background-color: var(--groc-ifep);
    color: var(--negre);
    padding: 5px 20px;
    font-weight: var(--bold);
}

.btn-groc:hover {
    background-color: var(--groc-ifep);
    color: var(--negre);
    opacity: 0.8;
}

/* colors generals */

.blau-ifep {
    color: var(--ifep-blau);
}

.bg-ifep {
    background-color: var(--ifep-blau);
}

.bg-cecot {
    background-color: var(--blau-cecot);
}

.bg-groc {
    background-color: var(--groc-ifep);
}

.bg-gris-cecot {
    background-color: var(--gris);
}

.border-ifep {
    border: 2px solid var(--ifep-blau) !important;
}

.banner-borsa {
    background-image: url(https://ifep.cat/area-privada/src/img/banner-borsa-treball-v2.jpg);
    background-repeat: no-repeat;

}


/* Pàgina principal */
/* Sidebar */

/* Benvinguts a l'area privada */
.banner-benvinguda {
    background-color: var(--ifep-blau);
    color: var(--blanc);
    border-radius: 10px;

    padding: 30px;
    min-height: 300px;
}

.text-banner-benvinguda {
    font-size: 20px;
}

.wrap-banner-anunci {
    min-height: 200px;
}




/* botons area privada */


.area-cards svg {
    width: 24px;
    height: 24px;
    fill: var(--negre)
}

.area-perfil {
    background-color: var(--gris);
}

.area-perfil .btn:hover {
    background-color: var(--blanc);

}




/* ------- Menu lateral ------------ */


@media (min-width: 991px) {
    .nav-general-lateral {
        top: 90px;
        height: 100%;
    }

}

@media (max-width: 991px) {
    .nav-general-lateral {
        top: 114px;

    }

    .navbar-brand img {
        width: 180px;
        height: auto;
    }

}

.nav-general-lateral .scroll {
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(100vh - 90px);
    /* mateix valor de .nav-general-lateral */
    scrollbar-width: thin;
}


.btn-toggle::after {
    width: 1.25em;
    line-height: 0;
    content: url("https://ifep.cat/area-privada/src/icon/arrow.png");
    transition: transform .35s ease;
    transform-origin: .5em 50%;
}


.btn-toggle[aria-expanded="false"]::after {
    transform: rotate(90deg) !important;
    display: flex;
}

.nav-link {
    color: var(--negre);
    padding: 10px 0;
    font-size: 16px;
}


.nav-general-lateral .nav-link:hover,
.nav-general-lateral .nav-link:focus,
.nav-general-lateral .nav-link:active {
    background-color: var(--gris);

    .collapse.show:hover {
        background-color: var(--gris);
    }
}

.navbar-nav .nav-link.active {
    background-color: var(--gris-mitja);
}

.nav-general-lateral .btn-ap.nav-link:hover {
    background-color: var(--negre);
}


.nav-link svg {
    width: 16px;
    height: 16px;
    fill: var(--blau-fosc);
}

.nav-general-lateral .nav-link svg path {
    fill: var(--blau-fosc);
}


.nav-general-lateral .btn-perfil {
    background-color: var(--gris);
    color: var(--ifep-blau);
}

.nav-general-lateral .btn-perfil svg path {
    fill: var(--ifep-blau);
}




/* .truncate-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
     Number of lines to show 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
} */


/* directori principal */

.banner-cursos {
    background-image: url(https://ifep.cat/area-privada/src/img/Pattern.svg);

    background-repeat: no-repeat;
    background-position: -90%;
    background-size: 150%;
}

.bi-search {
    width: 23px !important;
    height: 23px !important;
    margin-bottom: 15px;

    fill: var(--blanc) !important;
}



/* Pagines anteriors */

/* .grid-contingut .col {
    padding: 0;
    margin-bottom: .5rem !important;

} */




  .wizard-actions { border-top: 1px solid #e5e7eb; padding-top: 16px; margin-top: 20px; }
  .req::after { content:"*"; color:#dc3545; margin-left:2px; }
  .list-card { border:1px solid #e5e7eb; border-radius:10px; background:#f8fafc; }
  .list-card .trash { cursor:pointer; }