/* Document CSS */



/* menú */

nav.imc--menu button.imc--menu { display: none; }
nav.imc--menu button.imc--tanca { display: none; }
nav.imc--menu ul button.imc--volver { display: none; }

nav.imc--menu { width: 100%; padding: .2em 2em; background-color: #fff; border-bottom: 1px solid #ccc; }
nav.imc--menu .imc--me-co { position: relative; width: 100%; max-width: var(--app-amplaria); margin: 0 auto; }

nav.imc--menu ul { display: flex; gap: 0 1em; }
nav.imc--menu ul li { position: relative; }

nav.imc--menu ul a,
nav.imc--menu ul button { display: flex; align-items: center; gap: 0 .3em; line-height: 1.4em; padding: .5em 1em; background-color: transparent; border: none; border-radius: 0; transition: background-color .2s ease-out; }

nav.imc--menu ul a:focus,
nav.imc--menu ul a:hover,
nav.imc--menu ul button:focus,
nav.imc--menu ul button:hover { background-color: var(--color-principal-seleccionat); }

nav.imc--menu ul a span,
nav.imc--menu ul button span { display: block; color: var(--color-principal); line-height: 1.4em; }

nav.imc--menu ul button::after { content: ""; display: block; width: 1.7em; height: 1.2em; background: transparent url(../imgs/icones/ico_menu_sub_093574.svg) no-repeat 50% 50% / 100% auto; }


nav.imc--menu ul .imc--menu-sub { position: absolute; z-index: 10; top: 2em; left: 0; width: inherit; padding: .5em; background-color: #fff; box-shadow: .1em .1em .5em rgba(0,0,0,.3); transition: visibility .2s cubic-bezier(0,.78,.25,1), opacity .2s cubic-bezier(0,.78,.25,1), top .3s cubic-bezier(0,.78,.25,1); }

nav.imc--menu ul .imc--menu-sub[aria-hidden="false"] { top: 2.5em; transition: visibility 0s ease-out, opacity .2s cubic-bezier(0,.78,.25,1), top .3s cubic-bezier(0,.78,.25,1); }

nav.imc--menu ul .imc--menu-sub ul { flex-direction: column; gap: .5em 0; width: 100%; }


nav.imc--menu ul *[aria-current] span { border-bottom: 3px solid var(--color-principal); }



/* contingut */

.imc--contenidor .imc--contingut header { padding: 1em 2em .8em 2em; margin-bottom: 1em; background-color: #f2f2f2; border-bottom: 1px solid #ccc; }
.imc--contenidor .imc--contingut header .imc--co { width: 100%; max-width: var(--app-amplaria); margin: 0 auto; }
.imc--contenidor .imc--contingut header h1 span { font-size: 2em; }

.imc--contenidor .imc--contingut .imc--co-contingut { padding: 0 2em 2em 2em; }
.imc--contenidor .imc--contingut .imc--co-contingut .imc--co { width: 100%; max-width: var(--app-amplaria); margin: 0 auto; }


.imc--contenidor .imc--contingut header:has(.imc--ops) .imc--co { position: relative; }
.imc--contenidor .imc--contingut header .imc--ops { position: absolute; z-index: 2; top: 0; right: 0; }



/* idioma */

.imc--index .imc--idioma { display: flex; justify-content: center; gap: 0 1em; margin-bottom: 2em; }

html[lang="ca-ES"] .imc--index .imc--idioma button[data-idioma="ca-ES"],
html[lang="es-ES"] .imc--index .imc--idioma button[data-idioma="es-ES"],
html[lang="en-GB"] .imc--index .imc--idioma button[data-idioma="en-GB"] { font-weight: bold; background-color: var(--color-principal-seleccionat); border-color: var(--color-principal); pointer-events: none; }



/* tooltip */

.imc--tooltip { position: absolute; z-index: 200; top: 0; left: 0; max-width: 35em; padding: .5em .7em; background-color: var(--color-secundari-hover); opacity: 0; filter: drop-shadow(0 0 1px var(--color-principal)); transition: opacity .2s ease-out; }

.imc--tooltip.imc--mostra { opacity: 1; }

.imc--tooltip span { display: block; position: relative; }

.imc--tooltip span::before { content: ""; position: absolute; z-index: -1; bottom: -14px; left: -2px; width: 0; height: 0; border-top: solid 7px var(--color-secundari-hover); border-right: solid 7px transparent; border-left: solid 7px transparent; }

.imc--tooltip.imc--dreta span::before { left: inherit; right: 2px }

.imc--tooltip.imc--baix span::before {  top: -13px; bottom: inherit; transform: rotate(180deg); }



/* acordio */

div[data-element="acordio"] { display: grid; grid-template-rows: auto 0fr; overflow: hidden; width: 100%; transition: grid-template-rows 0.3s ease; }

div[data-element="acordio"] > button { margin-bottom: 2em; background-color: rgba(241, 241, 241, 1); border-bottom: 1px solid rgba(15, 90, 195, 1); }

div[data-element="acordio"] div[role="region"] { grid-row: 2; overflow: hidden; padding: 1em; border: 1px solid rgba(213, 213, 213, 1); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }

div[data-element="acordio"][data-estat="obert"] { grid-template-rows: auto 1fr; }

div[data-element="acordio"][data-estat="obert"] div[role="region"] { opacity: 1; visibility: visible; }



/* imatges descriptives */

img[aria-label] { display: inline-block; vertical-align: center; position: relative; top: .2em; width: 1.2em; height: 1.2em; }

table td img[aria-label] { margin-right: .6em; }



/* elipsis */

*[data-elipsis] { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

*[data-elipsis="1"] { -webkit-line-clamp: 1; line-clamp: 1; }
*[data-elipsis="2"] { -webkit-line-clamp: 2; line-clamp: 2; }
*[data-elipsis="3"] { -webkit-line-clamp: 3; line-clamp: 3; }
*[data-elipsis="4"] { -webkit-line-clamp: 4; line-clamp: 4; }



/* destacat */

div.imc--destacat { display: flex; align-items: center; gap: 0 .8em; color: rgba(107, 61, 0, 1); padding: 1em 1.2em; margin-bottom: 1.5em; background-color: rgba(255, 228, 192, 1); }
div.imc--destacat::before { content: ""; display: block; width: 2em; height: 2em; background: transparent url(../imgs/icones/ico_alerta_6B3D00.svg) no-repeat 50% 50% / 100% auto; }

div.imc--destacat .imc--co { flex-basis: fit-content; }


div.imc--destacat.imc--cerca-info {
    align-items: center;
    padding: .5em 1.2em;
    margin-top: 1em;
}

div.imc--destacat.imc--cerca-info::before {
    background-image: url(../imgs/icones/ico_cercant.svg);
    opacity: .7;
}

div.imc--destacat.imc--cerca-info .imc--de-co {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0 1em;
    width: 100%;
    text-align: left;
}

div.imc--destacat.imc--cerca-info button {
    display: block;
    white-space: nowrap;
    margin-left: auto;
}


/* cerca -> marca paraula */

.imc--cerca-marca {
    color: rgba(107, 61, 0, 1);
    padding: 0 .1em;
    background-color: rgba(255, 228, 192, 1);
}



/* favorit */

div.imc--favorit-anim { display: flex; align-items: center; justify-content: center; position: absolute; z-index: 200; top: 0; left: 0; width: 1.2em; height: 1.2em; opacity: 1; transition: opacity .2s ease-out; }

div.imc--favorit-anim::before { content: ""; display: block; width: 1.2em; height: 1.2em; background: transparent url() no-repeat 50% 50% / 100% auto; }


@keyframes favorit-marca {
    0% {
        transform: translate(0, 0) rotate(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-1.5em, -1.5em) rotate(180deg) scale(2);
        opacity: 0;
    }
}

div.imc--favorit-anim.imc--marca {
    animation: favorit-marca .5s ease-out 0s 1 normal forwards;
}

div.imc--favorit-anim.imc--marca::before {
    background-image: url(../imgs/icones/ico_favorit_seleccionat_FFAE43.svg);
}


@keyframes favorit-desmarca {
    0% {
        transform: translate(0, 0) rotate(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(1.5em, -1.5em) rotate(180deg) scale(2);
        opacity: 0;
    }
}

div.imc--favorit-anim.imc--desmarca {
    animation: favorit-desmarca .5s ease-out 0s 1 normal forwards;
}

div.imc--favorit-anim.imc--desmarca::before {
    background-image: url(../imgs/icones/ico_favorit_bt_093574.svg);
}


/* llista de documents */

.imc--llista-docs {
    display: flex;
    align-items: flex-start;
    gap: 1em;
    flex-wrap: wrap;
}

.imc--llista-docs div.imc--doc {
    display: inline-flex;
    align-items: stretch;
    gap: 0 .3em;
    min-height: 3em;
    padding-left: .8em;
    border: 1px solid #ccc;
}

.imc--llista-docs div.imc--doc::before {
    content: "";
    display: flex;
    align-items: center;
    width: 1.2em;
    background: transparent url(../imgs/icones/ico_doc.svg) no-repeat 50% 50% / 90% auto;
}

.imc--llista-docs div.imc--doc div {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    flex: 2;
    font-weight: normal;
    padding: .5em;
}

.imc--llista-docs div.imc--doc div > strong {
    display: block;
    font-weight: normal;
}

.imc--llista-docs div.imc--doc div > p {
    font-size: .8em;
}

.imc--llista-docs div.imc--doc button {
    padding-right: .6rem;
    padding-left: .6rem;
}


/* popup llista descàrrega */

.imc--popup.imc--popup-descarrega > .imc--contingut {
    max-width: 30em;
}

.imc--popup.imc--popup-descarrega > .imc--contingut header {
    padding: .8em 4.5em 1em 1.5em;
}




/* MEDIA QUERYS */

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

    nav.imc--menu { padding: .2em .5em; }
    nav.imc--menu ul { gap: 0; }


    .imc--contenidor .imc--contingut header { padding: 1em 1em 1em 1em; }
    .imc--contenidor .imc--contingut .imc--co-contingut { padding: 0 1em 2em 1em; }


    .imc--peu .imc--xiringos { padding: 1em 1em; }
    .imc--peu .imc--xiringos .imc--co a { font-size: .8em; }

    .imc--peu-menu { padding: 2em 1em; }

    .imc--peu-menu-mes { padding: 1em 1em; }

    .imc--peu .imc--qui-paga { padding: 1em 1em; }

}

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

    nav.imc--menu { position: relative; padding: 0; border-bottom: none; }

    nav.imc--menu button.imc--menu { display: flex; align-items: center; justify-content: center; position: absolute; top: -3.5em; right: 1em; width: 3em; height: 3em; padding: 0 !important; background-color: transparent; border: 0 !important; border-radius: 0; }

    nav.imc--menu button.imc--menu span { position: absolute; top: -999em; left: -999em; }
    nav.imc--menu button.imc--menu::before { content: ""; display: block; width: 1.4em; height: 1.4em; background: transparent url(../imgs/icones/ico_menu_fff.svg) no-repeat 50% 50% / auto 100%; }

    nav.imc--menu button.imc--tanca { display: none; }
    nav.imc--menu button.imc--tanca::before { background-image: url(../imgs/icones/ico_tanca_fff.svg); background-size: 140% auto; }


    .imc--contenidor:not(:has(.imc--re--funcionari)) nav.imc--menu { position: absolute; top: 4em; padding: 0 !important; }

    .imc--contenidor:not(:has(.imc--re--funcionari)) nav.imc--menu button.imc--menu { right: .7em; }


    nav.imc--menu .imc--me-co { position: fixed; z-index: 10; top: 4em; left: 0; width: 100%; height: calc(100% - 4em); font: normal 1em var(--text); visibility: hidden; opacity: 0; transition: visibility .2s cubic-bezier(0,.78,.25,1), opacity .2s cubic-bezier(0,.78,.25,1); }

    nav.imc--menu .imc--me-co::before { content: ""; position: fixed; z-index: 11; top: 4em; left: 0; width: 100%; height: calc(100% - 4em); background: rgba(0,0,0,.7); }

    nav.imc--menu .imc--me-co > ul { position: fixed; z-index: 12; top: 4em; right: 0; width: 100%; max-width: 60em; text-align: center; padding: 1.3em 2em 1em 2em; background-color: #fff; border: 1px solid #ccc; transform: translateX(100%); transition: transform .2s ease-out; }


    nav.imc--menu .imc--me-co[aria-hidden="false"] { visibility: visible; opacity: 1; transition: visibility 0s ease-out, opacity .2s cubic-bezier(0,.78,.25,1), ; }
    nav.imc--menu .imc--me-co[aria-hidden="false"] > ul { transform: translateX(0); }


    nav.imc--menu[data-menu="obert"] .imc--me-co { visibility: visible; opacity: 1; transition: visibility 0s ease-out, opacity .2s cubic-bezier(0,.78,.25,1), ; }
    nav.imc--menu[data-menu="obert"] .imc--me-co > ul { transform: translateX(0); }


    nav.imc--menu[data-menu="obert"] .imc--menu { display: none; }
    nav.imc--menu[data-menu="obert"] button.imc--tanca { display: flex; }



    nav.imc--menu .imc--me-co > ul { flex-direction: column; }
    nav.imc--menu ul button { width: 100%; padding-right: 0; }

    nav.imc--menu .imc--me-co > ul { padding: .5em 1em 1em 1em; }

    nav.imc--menu ul button[aria-haspopup]::after { margin-left: auto; transform: rotate(270deg); }

    nav.imc--menu ul a,
    nav.imc--menu ul button { padding: 1em 1em; padding-right: 0; }


    nav.imc--menu ul .imc--menu-sub { display: block; position: fixed; z-index: 13; top: 0; right: 0; width: 100%; max-width: 60em; text-align: left; padding: 0; }

    nav.imc--menu ul .imc--menu-sub[aria-hidden="false"] { top: 0; }


    nav.imc--menu ul .imc--menu-sub ul { flex-direction: column; padding: .5em 0; }
    nav.imc--menu ul .imc--menu-sub li { width: 100%; }
    nav.imc--menu ul .imc--menu-sub li a { flex-direction: row; gap: 0 .7em; padding-right: 2em; padding-left: 2em; }

    nav.imc--menu ul .imc--menu-sub li a strong { width: 2em; text-align: right; }
    nav.imc--menu ul .imc--menu-sub li a span { font-size: 1em; }


    nav.imc--menu ul button.imc--volver { display: inline-flex; align-items: center; gap: .5em; background-color: var(--color-secundari-hover); }
    nav.imc--menu ul button.imc--volver::after { display: none; }
    nav.imc--menu ul button.imc--volver::before { content: ""; display: inline-block; vertical-align: middle; position: relative; top: 0; width: 1.2em; height: 1.2em; background: transparent url(../imgs/icones/ico_menu_sub_093574.svg) no-repeat 50% 50% / 130% auto; transform: rotate(90deg); }

    nav.imc--menu .imc--bloc { padding: 0 1em; }


    .imc--contenidor:has(.imc--re--funcionari) nav.imc--menu .imc--me-co { top: 7.2em; }
    .imc--contenidor:has(.imc--re--funcionari) nav.imc--menu .imc--me-co::before { top: 7.2em; }
    .imc--contenidor:has(.imc--re--funcionari) nav.imc--menu .imc--me-co > ul { top: 7.2em; }


    .imc--contenidor .imc--contingut header h1 span { font-size: 1.5em; }

    .imc--contenidor .imc--contingut header .imc--ops { position: static; text-align: center; margin: .5em 0 0 0; }


    .imc--destacat { align-items: flex-start; padding: .7em .8em; }
    .imc--destacat::before { position: relative; top: -.3em; }


    *[data-transforma="acordio"] {
        display: none !important;
    }

    div[data-element="acordio"][data-id="imc--acordio-menu"] > button {
        max-height: 4em;
        padding: .45em 1em;
        margin-bottom: 0;
        background-color: var(--color-secundari-hover);
    }

    div[data-element="acordio"][data-id="imc--acordio-menu"] > button[aria-expanded="true"] {
        border-bottom-color: var(--color-secundari-hover);
    }

    div[data-element="acordio"][data-id="imc--acordio-menu"] > button strong,
    div[data-element="acordio"][data-id="imc--acordio-menu"] > button span {
        font-weight: bold;
        color: var(--color-principal);
    }

    div[data-element="acordio"][data-id="imc--acordio-menu"] div[role="region"] {
        padding: 0;
        border: none;
        border-bottom: 1px solid rgba(15, 90, 195, 1);
    }

    div[data-element="acordio"][data-id="imc--acordio-menu"] li + li {
        border-top: 1px solid #fff;
    }

    div[data-element="acordio"][data-id="imc--acordio-menu"] ul li > a {
        display: flex;
        align-items: center;
        gap: 0 .8em;
        padding: 1em 1em;
        background-color: rgba(17, 17, 17, 0.06);
    }


    div.imc--destacat.imc--cerca-info {
        align-items: flex-start;
        padding: .5em .8em;
        margin-top: .5em;
    }

    div.imc--destacat.imc--cerca-info::before {
        position: relative;
        top: .1em;
    }

    div.imc--destacat.imc--cerca-info .imc--de-co {
        flex-direction: column;
        gap: .4em 0;
    }


    .imc--llista-docs {
        flex-direction: column;
    }

    .imc--llista-docs > li {
        width: 100%;
    }

    .imc--llista-docs div.imc--doc {
        width: 100%;
    }

    .imc--popup.imc--popup-descarrega > .imc--contingut header {
        display: flex;
        align-items: center;
        min-height: 4em;
        padding: .8em 3.5em 1em 1.5em;
    }

}