/* Document CSS */


/* PESTANYES */

.imc--pestanyes { margin-bottom: 1em; }


/* tablist */

.imc--pestanyes div[role="tablist"] { display: flex; align-items: flex-end; gap: .5em; position: relative; z-index: 5; border-bottom: 3px solid #ccc; }

.imc--pestanyes div[role="tablist"] .imc-marcador { display: block; position: absolute; z-index: 1; bottom: -3px; left: 0; width: 2em; height: .3em; background-color: transparent; border-bottom: 3px solid var(--color-principal); transition: left .2s cubic-bezier(0,.78,.25,1), width .2s cubic-bezier(0,.78,.25,1); }

.imc--pestanyes div[role="tablist"] button { padding: .3rem 1rem .8rem 1rem; background-color: transparent; }
.imc--pestanyes div[role="tablist"] button span { font-size: 1.1em; color: var(--color-principal); line-height: 1.2em; transition: color .2s ease-out; }

.imc--pestanyes div[role="tablist"] button em { display: inline-flex; align-items: center; justify-content: center; position: relative; top: -0.3em; width: 1.5em; height: 1.5em; font-size: .8em; font-style: normal; color: #fff; margin-right: .3em; background-color: #666; border-radius: 50%; }

.imc--pestanyes div[role="tablist"] button em[data-cap] { background-color: #c00; }
.imc--pestanyes div[role="tablist"] button em[data-cap]::before { content: ""; display: inline-block; width: 1em; height: 1em; background: transparent url(../imgs/icones/ico_sense_items_fff.svg) no-repeat center center / auto 80%; }


.imc--pestanyes div[role="tablist"] button:hover span,
.imc--pestanyes div[role="tablist"] button:focus span { color: var(--color-principal-hover); }

.imc--pestanyes div[role="tablist"] button[aria-selected="true"] { pointer-events: none; }
.imc--pestanyes div[role="tablist"] button[aria-selected="true"] span { font-weight: bold; color: #000; }

.imc--pestanyes div[role="tablist"] button[aria-selected="true"] em { background-color: #000; }
.imc--pestanyes div[role="tablist"] button[aria-selected="true"] em[data-cap] { background-color: #c00; }


.imc--pestanyes div[role="tablist"] button { background-color: transparent; border-color: transparent; }
.imc--pestanyes div[role="tablist"] button span { color: var(--color-principal); }

.imc--pestanyes div[role="tablist"] button:focus,
.imc--pestanyes div[role="tablist"] button:hover { background-color: var(--color-secundari-hover); }

.imc--pestanyes div[role="tablist"] button:focus span,
.imc--pestanyes div[role="tablist"] button:hover span { color: var(--color-principal); }

.imc--pestanyes div[role="tablist"] button[disabled] {
    background-color: transparent !important;;
}

.imc--pestanyes div[role="tablist"] button[disabled] span {
    color: #666;
}


.imc--pestanyes div[role="tablist"] a.imc--bt {
    padding: .3rem 1rem .8rem 1rem;
    background-color: transparent;
}

.imc--pestanyes div[role="tablist"] a.imc--bt span {
    font-size: 1.1em;
    color: var(--color-principal);
    line-height: 1.2em;
    transition: color .2s ease-out;
}

.imc--pestanyes div[role="tablist"] a.imc--bt.imc--a-extern::after {
    background-image: url(../../imgs/icones/ico_finestra_nova_093574.svg);
}



/* nojs */

.imc--pestanyes.imc--nojs div[role="tablist"] { align-items: flex-start; height: 2.8em; overflow: visible; }
.imc--pestanyes.imc--nojs div[role="tablist"] button[aria-selected="true"] { border-bottom: 4px solid var(--color-principal); }


/* tabpanel */

.imc--pestanyes div[role="tabpanel"] {
    padding-top: 1.5em;
    background-color: transparent;
}

.imc--pestanyes div[role="tabpanel"][aria-hidden="true"] { display: none; }


/* taula */

.imc--pestanyes .imc--taula { padding: 0; }


/* fieldset */

.imc--pestanyes fieldset { padding: 0; margin-bottom: 0; box-shadow: none; }





/* media */

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

    .imc--pestanyes div[role="tablist"] {
        align-items: flex-start;
        overflow: auto;
        overflow-y: hidden;
        min-height: 3em;
        padding-left: 0;
    }

    .imc--pestanyes div[role="tablist"] button {
        white-space: nowrap;
        padding: .3rem .5rem .8rem .5rem;
    }

    .imc--pestanyes div[role="tabpanel"] {
        padding: 1em 0;
    }

}


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

    .imc--pestanyes.imc--nojs div[role="tablist"] {
        overflow-x: scroll;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
    }

    .imc--pestanyes.imc--nojs div[role="tablist"] button { /*width: 80vw;*/
        scroll-snap-align: center;
    }

    .imc--pestanyes div[role="tabpanel"] {
        padding: 1em 0;
    }

}