/* Document CSS */


/* popup */

.imc--popup { position: fixed; z-index: 30; top: 0; left: 0; width: 100%; height: 100%; font: normal 1em var(--text); transition: visibility .2s cubic-bezier(0,.78,.25,1), opacity .2s cubic-bezier(0,.78,.25,1); }
.imc--popup[aria-hidden="false"] { transition: visibility 0s ease-out, opacity .2s cubic-bezier(0,.78,.25,1); }

.imc--popup::before { content: ""; position: fixed; z-index: 11; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.7); }

.imc--popup > .imc--contingut { display: grid; grid-template-rows: auto 30fr; position: fixed; z-index: 12; top: 50%; left: 50%; width: 60em; max-height: 90%; background-color: #fff; transform: translate(-50%, -50%); transition: border-color .2s ease-out; }

.imc--popup:focus > .imc--contingut { border-color: #000; }


.imc--popup > .imc--contingut header { padding: .8em 1.5em 1em 1.5em; background-color: #f2f2f2; }
.imc--popup > .imc--contingut header h2 { font: normal 1em var(--text); margin: 0; }
.imc--popup > .imc--contingut header h2 span { font-size: 1.6em; font-weight: bold; }
.imc--popup > .imc--contingut header h2 img { width: 1.8em; height: 1.8em; margin-right: .3em; }

.imc--popup > .imc--contingut header p { margin: 0 0 .5em 0; }

.imc--popup > .imc--contingut header:has(p) h2 { margin-bottom: .5em; }

.imc--popup > .imc--contingut header button[data-accio="tanca"] { position: absolute; top: .8em; right: 1.5em; padding-right: .5em; padding-left: .5em; background-color: transparent; border: 0; }
.imc--popup > .imc--contingut header button[data-accio="tanca"]::before { background-image: url(../../imgs/icones/ico_tanca.svg); background-size: 150% auto; }


.imc--popup > .imc--contingut .imc--scroll { overflow: auto; }


.imc--popup > .imc--contingut .imc--info { padding: 1.5em 2em; }
.imc--popup > .imc--contingut .imc--info::after { content: ""; display: table; width: 100%; height: 1px; }


.imc--popup > .imc--contingut .imc--info > p { margin-bottom: 1em; }

.imc--popup > .imc--contingut .imc--botonera { list-style: none; padding: 0 2em 1.5em 2em; margin: 0; text-align: right; border-top: none; }
.imc--popup > .imc--contingut .imc--botonera li { display: inline; }

.imc--popup .imc--botonera button + button { margin-left: .5em; }



/* popup -> detalls */

.imc--popup.imc--popup-detall > .imc--contingut { grid-template-rows: auto 1fr; top: 0; left: auto; right: 0; width: 100%; height: 100%; max-height: 100vh; background-color: #fff; transform: translateX(100%); transition: transform .2s ease-out; }

.imc--popup.imc--popup-detall[aria-hidden="false"] > .imc--contingut { transform: translateX(0); }

.imc--popup.imc--popup-detall > .imc--contingut header { padding: 1.3em 2em 1em 2em; }



/* selector */

.imc--popup[data-tipus="selector"][data-maxim] .imc--botonera button[data-accio="tanca"] { display: none; }
.imc--popup[data-tipus="selector"][data-maxim] .imc--botonera button[data-accio="dacord"] { display: inline-block; }

.imc--popup[data-tipus="selector"][data-maxim="1"] .imc--botonera button[data-accio="tanca"] { display: inline-block; }
.imc--popup[data-tipus="selector"][data-maxim="1"] .imc--botonera button[data-accio="dacord"] { display: none; }

.imc--popup[data-tipus="selector"] .imc--resultats li { padding-bottom:.3em; }
.imc--popup[data-tipus="selector"] .imc--resultats li > label { display: block; font-size: 1.2em; padding: .3em .5em; }

.imc--popup[data-tipus="selector"] .imc--resultats li > label:hover,
.imc--popup[data-tipus="selector"] .imc--resultats li > label:focus { background-color: #ffc; }



/* fieldset */

.imc--popup fieldset,
.imc--popup .imc--fieldset { position: relative; padding: 0; margin-bottom: 1em; background-color: #fff; border-bottom: 1px dashed #ccc; box-shadow: none; }



/* taula */

.imc--popup .imc--taula { padding: 0; }
.imc--popup .imc--taula > p { margin-bottom: 1em; }



/* usuari */

.imc--popup.imc--popup-usuari > .imc--contingut { grid-template-rows: auto 1fr auto; top: 0; left: auto; right: 0; width: 100%; max-width: 30em; height: 100%; max-height: 100vh; background-color: #fff; transform: translateX(100%); transition: transform .2s ease-out; }

.imc--popup.imc--popup-usuari[aria-hidden="false"] > .imc--contingut { transform: translateX(0); }



.imc--popup.imc--popup-usuari > .imc--contingut > header { padding-top: 1em; padding-bottom: .5em; background-color: var(--color-principal-fons); }

.imc--popup.imc--popup-usuari > .imc--contingut > header::before { content: attr(data-inicials); display: flex; align-items: center; justify-content: center; width: 3em; height: 3em; color: #fff; background-color: var(--color-principal); border-radius: 50%;; }

.imc--popup.imc--popup-usuari > .imc--contingut > header h2 { font-size: 1.1em; margin-top: 1em; margin-bottom: .2em; }
.imc--popup.imc--popup-usuari > .imc--contingut > header p.imc--connexio { font-size: .9em; }


.imc--popup.imc--popup-usuari .imc--gestiona a { display: flex; align-items: center; gap: 0 .3em; padding: .5em 0; }
.imc--popup.imc--popup-usuari .imc--gestiona a::before { content: ""; display: block; width: 1.5em; height: 1em; background: transparent url(../../imgs/icones/ico_user_093574.svg) no-repeat center center / auto 100%; }
.imc--popup.imc--popup-usuari .imc--gestiona a::after { content: ""; display: block; width: 1.5em; height: 1em; margin-left: auto; background: transparent url(../../imgs/icones/ico_fletxa.svg) no-repeat center center / 100% auto; }


.imc--usuari-representacions header { display: flex; justify-content: center; flex-wrap: wrap; padding-bottom: .5em !important; background-color: transparent !important; }
.imc--usuari-representacions header h3 { display: inline-flex; align-items: center; gap: 0 .3em; font-weight: normal; margin-bottom: 0; }
.imc--usuari-representacions header h3 span { font-size: 1em !important; }

.imc--usuari-representacions header h3::before { content: ""; display: block; width: 1em; height: 1em; margin-right: .4em; background: transparent url(../../imgs/icones/ico_representacions.svg) no-repeat center center / auto 100%; }



.imc--usuari-representacions header .imc--f-selector { position: relative; width: inherit; min-height: inherit; margin-left: auto; }

.imc--usuari-representacions header .imc--f-selector button.imc--selector { padding-right: .5em; padding-left: .5em; border: 0; }
.imc--usuari-representacions header .imc--f-selector button.imc--selector::before { display: none;}
.imc--usuari-representacions header .imc--f-selector button.imc--selector::after { content: ""; display: block; width: 1em; height: 1em; background: transparent url(../../imgs/icones/ico_selector_093574.svg) no-repeat center center / auto .4em; }

.imc--usuari-representacions header .imc--f-selector button.imc--selector span { font-size: .8em; }

.imc--usuari-representacions header .imc--f-selector .imc--opcions { position: absolute; z-index: 10; right: 0; max-width: 10em; 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); }
.imc--usuari-representacions header .imc--f-selector .imc--opcions button { padding: .2em .5em; border: 0; border-radius: 0; }
.imc--usuari-representacions header .imc--f-selector .imc--opcions button span { font-size: .9em; text-wrap: nowrap; }

.imc--usuari-representacions header .imc--f-selector .imc--opcions[aria-hidden="false"] { transition: visibility 0s ease-out, opacity .2s cubic-bezier(0,.78,.25,1); }



.imc--usuari-representacions header .imc--repr-info { position: relative; padding: .5em .8em .5em 2.5em; margin: .4em 0; background-color: #f2f2f2; }
.imc--usuari-representacions header .imc--repr-info p { font-size: .9em; margin-bottom: 0; }

.imc--usuari-representacions header .imc--repr-info::before { content: ""; display: block; position: absolute; top: .5em; left: .5em; width: 1.5em; height: 1.5em; background: transparent url(../../imgs/icones/ico_info.svg) no-repeat center center / auto 100%; opacity: .5; }



.imc--usuari-representacions .imc--cercador { padding: 0 1.5em 1em 1.5em; }

.imc--el.imc--el-cercador { display: flex; justify-content: center; overflow: hidden; border: 1px solid #ccc; }
.imc--el.imc--el-cercador input { flex-grow: 2; border: 0; }
.imc--el.imc--el-cercador button { padding: 0 1em; margin-left: auto;  border: 0; border-radius: 0; }

.imc--el.imc--el-cercador.imc--el-error { border-color: var(--color-error); }
.imc--el.imc--el-cercador.imc--el-error input { background-color: var(--fons-error); }


button.imc--bt-cerca::before { background-image: url(../../imgs/icones/ico_cerca_093574.svg); }


.imc--f-error { position: relative; padding: .5em .8em .5em 2.5em; margin: .4em 0; background-color: var(--fons-error); }
.imc--f-error p { font-size: .9em; margin-bottom: 0; }

.imc--f-error::before { content: ""; display: block; position: absolute; top: .5em; left: .5em; width: 1.5em; height: 1.5em; background: transparent url(../../imgs/icones/ico_error_EF2345.svg) no-repeat center center / auto 100%; opacity: .5; }


.imc--f-error-local { color: var(--color-error); }
.imc--f-error-local p { font-size: .9em; margin-bottom: 0; }



.imc--usuari-representacions { display: grid; grid-template-rows: auto 1fr auto; }

.imc--usuari-representacions:has(.imc--cercador) { grid-template-rows: auto auto 1fr auto; }

.imc--usuari-representacions .imc--resultats { position: relative; margin: 0 1.5em .5em 1.5em; }
.imc--usuari-representacions .imc--resultats ul { overflow: auto; position: absolute; top: 0; left: 0; width: 100%; height: 100%; scrollbar-width: thin; scrollbar-color: var(--color-principal); }
.imc--usuari-representacions .imc--resultats li { padding-bottom: .3em; }
.imc--usuari-representacions .imc--resultats li a { display: block; position: relative; padding: .4em 0 .4em 2.5em; }

.imc--usuari-representacions .imc--resultats li a::before { content: attr(data-inicials); display: flex; align-items: center; justify-content: center; position: absolute; top: .3em; left: 0; width: 2.5em; height: 2.5em; font-size: .7em; color: #fff; background-color: var(--color-principal); border-radius: 50%;; }

.imc--usuari-representacions .imc--resultats li a span { display: block; font-size: .8em; color: #333; }


.imc--usuari-representacions .imc--gestionar { padding: .3em .5em; }
.imc--usuari-representacions .imc--gestionar a { display: flex; align-items: center; gap: 0 .3em; padding: .5em 1em; transition: background-color .2s ease-out, transform .2s ease-out; }
.imc--usuari-representacions .imc--gestionar a::before { content: ""; display: block; width: 1.5em; height: 1em; background: transparent url(../../imgs/icones/ico_repres_gestiona_093574.svg) no-repeat center center / auto 100%; }
.imc--usuari-representacions .imc--gestionar a::after { content: ""; display: block; width: 1.5em; height: 1em; margin-left: auto; background: transparent url(../../imgs/icones/ico_fletxa.svg) no-repeat center center / 100% auto; }

.imc--usuari-representacions .imc--gestionar a:hover,
.imc--usuari-representacions .imc--gestionar a:focus { background-color: var(--color-secundari-hover); }


.imc--popup.imc--popup-usuari:not(:has(.imc--usuari-representacions)) .imc--usuari-peu { margin-top: 1em; }


.imc--popup.imc--popup-usuari .imc--ajuda { padding: .3em .5em; }
.imc--popup.imc--popup-usuari .imc--ajuda a { display: flex; align-items: center; gap: 0 .3em; padding: .5em 1em; transition: background-color .2s ease-out, transform .2s ease-out; }
.imc--popup.imc--popup-usuari .imc--ajuda a::before { content: ""; display: block; width: 1.5em; height: 1em; background: transparent url(../../imgs/icones/ico_ajuda_093574.svg) no-repeat center center / auto 100%; }
.imc--popup.imc--popup-usuari .imc--ajuda a::after { content: ""; display: block; width: 1.5em; height: 1em; margin-left: auto; background: transparent url(../../imgs/icones/ico_fletxa.svg) no-repeat center center / 100% auto; }

.imc--popup.imc--popup-usuari .imc--ajuda a:hover,
.imc--popup.imc--popup-usuari .imc--ajuda a:focus { background-color: var(--color-secundari-hover); }


.imc--popup.imc--popup-usuari .imc--idioma { display: flex; align-items: center; padding: .5em 1.5em; }
.imc--popup.imc--popup-usuari .imc--idioma p { display: flex; align-items: center; gap: 0 .3em; }
.imc--popup.imc--popup-usuari .imc--idioma p::before { content: ""; display: block; width: 1.5em; height: 1em; background: transparent url(../../imgs/icones/ico_idioma.svg) no-repeat center center / auto 100%; }
.imc--popup.imc--popup-usuari .imc--idioma .imc--opcions { font-size: .9em; margin-left: auto; }
.imc--popup.imc--popup-usuari .imc--idioma .imc--opcions button { margin-left: .3em; }


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


.imc--popup.imc--popup-usuari .imc--sessio { padding: .5em .5em; }
.imc--popup.imc--popup-usuari .imc--sessio button { display: flex; align-items: center; width: 100%; border: 0; padding-right: 1em; border-radius: 0; }
.imc--popup.imc--popup-usuari .imc--sessio button::after { content: ""; display: block; width: 1.5em; height: 1em; margin-left: auto; background: transparent url(../../imgs/icones/ico_ix_093574.svg) no-repeat center center / auto 100%; }




/* MEDIA */

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

	.imc--popup > .imc--contingut { max-height: 90%; }

}

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

	.imc--popup.imc--popup-usuari > .imc--contingut > header { display: grid; grid-template-columns: auto 1fr; }

	.imc--popup.imc--popup-usuari > .imc--contingut > header::before { grid-area: 1 / 1 / span 2 / 1; }
	.imc--popup.imc--popup-usuari > .imc--contingut > header h2 { padding-left: .7em; margin-top: .2em; }
	.imc--popup.imc--popup-usuari > .imc--contingut > header p.imc--connexio { padding-left: .7em; }

	.imc--popup.imc--popup-usuari > .imc--contingut header p.imc--gestiona { grid-area: 3 / 1 / 3 / span 2; }


	.imc--popup > .imc--contingut header h2 span { font-size: 1.2em; }
	.imc--popup > .imc--contingut header h2 img { width: 1.4em; height: 1.4em; }


	.imc--popup.imc--popup-detall > .imc--contingut header { padding: 1em 4em 1em 1em; }

	.imc--popup > .imc--contingut .imc--botonera { padding: 0 1em 1.5em 1em;text-align: center; }

	.imc--popup > .imc--contingut header button[data-accio="tanca"] { right: 1em; }

}

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

	.imc--popup > .imc--contingut header button { right: 1em; }

	.imc--popup > .imc--contingut { width: 90%; }
	.imc--popup > .imc--contingut header { padding: 1.2em 1em 1.4em 1em; }
	.imc--popup > .imc--contingut .imc--info { padding: 1.5em 1em; }

}

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

	.imc--popup > .imc--contingut { width: calc(100% - 1em); }

	.imc--popup > .imc--contingut header { padding: .5em 1em .5em 1em; }

	.imc--popup > .imc--contingut .imc--info { padding: 1em 1em; }

	.imc--usuari-representacions .imc--cercador { padding: 0 1em 1em 1em; }

	.imc--usuari-representacions .imc--resultats { margin: 0 1em .5em 1em; }

	.imc--usuari-representacions .imc--gestionar,
	.imc--popup.imc--popup-usuari .imc--ajuda { padding: .3em 0; }

	.imc--popup.imc--popup-usuari .imc--idioma { padding: .5em 1em; }

	.imc--popup.imc--popup-usuari .imc--sessio { padding: .5em 0; }

}