/* Document CSS */

/* representacio */

.imc--representacio { width: 100%; padding: .2em 1.75em; background-color: rgba(241, 241, 241, 1); border: .27em solid rgba(130, 130, 130, 1); }
.imc--representacio .imc--co { display: flex; align-items: center; position: relative;  width: 100%; max-width: var(--app-amplaria); margin: 0 auto; }

.imc--representacio .imc--re-dades { display: flex; align-items: center; gap: 0 1em; position: relative; flex-grow: 2; min-height: 2.3em; padding: 0 1em 0 3em; }

.imc--representacio .imc--re-dades::before { content: ""; display: block; position: absolute; top: .4em; left: 0; width: 1.3em; height: 1.3em; background: transparent url(../imgs/icones/ico_ajuda_093574.svg) no-repeat 50% 50% / auto 100%; }

.imc--representacio .imc--re-dades div { display: flex; align-items: center; gap: 0 .4em; }

.imc--representacio .imc--re-dades div > span { font-size: .8em; }


.imc--re--funcionari::before { content: ""; display: block; width: 1.3em; height: 1.3em; background: transparent url(../imgs/icones/ico_funcionari_habilitat_093574.svg) no-repeat 50% 50% / 100% auto; }
.imc--re--funcionari::after { content: ""; display: block; width: 1.3em; height: 1.3em; background: transparent url(../imgs/icones/ico_fletxa.svg) no-repeat 50% 50% / 100% auto; }

.imc--re--representant::before { content: ""; display: block; width: 1.3em; height: 1.3em; background: transparent url(../imgs/icones/ico_repres_representant.svg) no-repeat 50% 50% / 100% auto; }
.imc--re--representant::after { content: ""; display: block; width: 1.3em; height: 1.3em; background: transparent url(../imgs/icones/ico_fletxa.svg) no-repeat 50% 50% / 100% auto; }

.imc--re--representat::before { content: ""; display: block; width: 1.3em; height: 1.3em; background: transparent url(../imgs/icones/ico_repres_representat.svg) no-repeat 50% 50% / 100% auto; }

.imc--representacio .imc--re-dades:not(:has(.imc--re--representat)) .imc--re--representant::after { display: none; }


.imc--representacio button.imc--ix { margin-left: auto; }
.imc--representacio button.imc--ix::after { background-image: url(../imgs/icones/ico_repres_ix_093574.svg); }

.imc--representacio button.imc--tanca { display: none; position: absolute; top: 0; right: 0; font-size: 1.2em; padding: 0 .4em; }
.imc--representacio button.imc--tanca::before { background-image: url(../imgs/icones/ico_tanca.svg); background-size: 120% auto; }



.imc--contenidor:has(.imc--representacio) .imc--menu { padding: .2em 1.75em; border-right: .25em solid rgba(130, 130, 130, 1); border-left: .25em solid rgba(130, 130, 130, 1); }
.imc--contenidor:has(.imc--representacio) .imc--contingut { border-right: .25em solid rgba(130, 130, 130, 1); border-left: .25em solid rgba(130, 130, 130, 1); }
.imc--contenidor:has(.imc--representacio) .imc--peu { border: .25em solid rgba(130, 130, 130, 1); border-top: 0; }


.imc--contenidor:has(.imc--re--funcionari) .imc--representacio { background-color: rgba(207, 233, 245, 1); border: .27em solid rgba(19, 108, 235, 1); }
.imc--contenidor:has(.imc--re--funcionari) .imc--cap { padding: .8em 1.75em; border-right: .25em solid rgba(19, 108, 235, 1); border-left: .25em solid rgba(19, 108, 235, 1); }
.imc--contenidor:has(.imc--re--funcionari) .imc--menu { padding: .2em 1.75em; border-right: .25em solid rgba(19, 108, 235, 1); border-left: .25em solid rgba(19, 108, 235, 1); }
.imc--contenidor:has(.imc--re--funcionari) .imc--contingut { border-right: .25em solid rgba(19, 108, 235, 1); border-left: .25em solid rgba(19, 108, 235, 1); }
.imc--contenidor:has(.imc--re--funcionari) .imc--peu { border: .25em solid rgba(19, 108, 235, 1); border-top: 0; }





/* MEDIA QUERYS */

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

    .imc--representacio { padding: .2em .75em; }

    .imc--contenidor:has(.imc--representacio) .imc--cap,
    .imc--contenidor:has(.imc--re--funcionari) .imc--cap { padding: .8em 0.75em; }

    .imc--contenidor:has(.imc--representacio) nav.imc--menu,
    .imc--contenidor:has(.imc--re--funcionari) .imc--menu { padding: .2em .25em; }

}

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

    .imc--representacio .imc--re-dades { padding-left: 2.5em; cursor: pointer; }

    .imc--representacio .imc--re-dades:hover { background-color: var(--color-secundari-hover); }

    .imc--representacio .imc--re-dades div > strong span { position: absolute; top: -999em; left: -999em; }
    .imc--representacio .imc--re-dades div > span { display: none; }

    .imc--representacio .imc--re-dades div > strong::before { content: attr(data-inicials); display: inline; }

    .imc--representacio button.imc--ix span { position: absolute; top: -999em; left: -999em; }


    .imc--representacio .imc--co { transition: flex-direction .2s cubic-bezier(0,.78,.25,1), gap .2s cubic-bezier(0,.78,.25,1), padding-top .2s cubic-bezier(0,.78,.25,1); }


    .imc--representacio[data-estat="desplegat"] .imc--co { flex-direction: column; gap: .8em 0; padding-top: .5em; }

    .imc--representacio[data-estat="desplegat"] .imc--re-dades { align-items: flex-start; flex-direction: column; gap: .8em 0; width: 100%; }
    .imc--representacio[data-estat="desplegat"] .imc--re-dades::before { top: -0.1em; }

    .imc--representacio[data-estat="desplegat"] .imc--re-dades div > strong span { position: static; }
    .imc--representacio[data-estat="desplegat"] .imc--re-dades div > span { display: inline; }

    .imc--representacio[data-estat="desplegat"] .imc--re-dades div > strong::before { display: none; }

    .imc--representacio[data-estat="desplegat"] button.imc--ix { margin-left: 0; }
    .imc--representacio[data-estat="desplegat"] button.imc--ix span { position: static; }

    .imc--representacio[data-estat="desplegat"] button.imc--tanca { display: inline-flex; }

}

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

    .imc--contenidor:has(.imc--representacio) .imc--cap,
    .imc--contenidor:has(.imc--re--funcionari) .imc--cap { padding-top: .4em; padding-bottom: .4em; }

}

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

}