/* Document CSS */


/* taula */

div.imc--taula[data-llistat] .imc--t-info { margin-bottom: 1em; }

div.imc--taula[data-llistat] table thead th { padding-bottom: 0; background-color: var(--color-principal); }
div.imc--taula[data-llistat] table thead th:has(button) { width: 3em; }

div.imc--taula[data-llistat] table thead th > a { display: flex; align-items: center; height: 3em; color: #fff;}

div.imc--taula[data-llistat] table thead th > a:hover,
div.imc--taula[data-llistat] table thead th > a:focus { color: #fff; background-color: var(--color-principal-hover); }

div.imc--taula[data-llistat] table tbody tr:nth-child(even) { background-color: transparent; }



div.imc--taula[data-llistat] table tbody tr[data-id]:hover { background-color: beige; cursor: pointer; }

div.imc--taula[data-llistat] table tbody tr[tabindex]:focus:not(:focus-visible) { outline: none; }
div.imc--taula[data-llistat] table tbody tr[tabindex]:focus-visible { background-color: beige; outline: 2px solid #3182ce; outline-offset: 2px; }



div.imc--taula[data-llistat] table thead th button.imc--img.imc--favorit { height: 2.7em; padding-top: 0; padding-bottom: 0; }

div.imc--taula[data-llistat] table td:has(button) { padding: 0; }
div.imc--taula[data-llistat] table td button { min-height: 3.2em; }


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

div.imc--taula[data-llistat] table td img[aria-label] { margin-right: .6em; }

div.imc--taula[data-llistat] table td:not(:has(span)) img[aria-label] { margin-right: 0; }

div.imc--taula[data-llistat] table td span.imc--hora { display: block; padding-top: .2em; }


div.imc--taula[data-llistat] table .imc--mobil { display: none; }



/* taula en popup */

.imc--popup div.imc--taula[data-llistat] table thead th { background-color: rgba(241, 241, 241, 1); }

.imc--popup div.imc--taula[data-llistat] table thead th > a:hover,
.imc--popup div.imc--taula[data-llistat] table thead th > a:focus { background-color: rgb(226, 226, 226); }



/* resultats */

div.imc--taula[data-llistat] .imc--nav { display: flex; align-items: center; background-color: #f2f2f2; }

div.imc--taula[data-llistat] .imc--nav nav { margin-left: auto; }
div.imc--taula[data-llistat] .imc--nav ul { display: flex; align-items: center; gap: 0 .5em; }
div.imc--taula[data-llistat] .imc--nav ul a { min-height: 2.5em; padding-right: 1em; padding-left: 1em; background-color: #fff; }

div.imc--taula[data-llistat] .imc--nav ul a[aria-current="true"] { background-color: var(--color-principal); pointer-events: none; cursor: default; }
div.imc--taula[data-llistat] .imc--nav ul a[aria-current="true"] span { color: #fff; }

div.imc--taula[data-llistat] .imc--nav ul a:not([href]) {
    pointer-events: none;
    filter: grayscale(100%);
}

div.imc--taula[data-llistat] .imc--nav ul a:not([href])::before {
    filter: grayscale(100%);
    opacity: .5;
}

div.imc--taula[data-llistat] .imc--nav ul a:not([href])::after {
    filter: grayscale(100%);
    opacity: .5;
}



/* llegenda */

.imc--llegenda ul { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 1em 2em; padding: 1em 0 2em 0; }
.imc--llegenda ul li { display: flex; justify-content: center; gap: 0 .4em; }
.imc--llegenda ul li img[aria-label] { position: static; }



/* MEDIA */

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

    div.imc--taula[data-llistat] table thead { display: none; }

    div.imc--taula[data-llistat] table tbody tr { position: relative; display: flex; flex-wrap: wrap; gap: .8em .5em; padding-bottom: .5em; margin-bottom: 1em; box-shadow: 0 0 10px #ccc; }

    div.imc--taula[data-llistat] table tbody td { padding: 0 .5em; }
    div.imc--taula[data-llistat] table tbody td[aria-label]::before { content: attr(aria-label); display: block; font-size: .8em; color: #757575; text-transform: uppercase; }

    div.imc--taula[data-llistat] table tbody td span,
    div.imc--taula[data-llistat] table tbody td strong { font-size: 1.2em; overflow-wrap: break-word; word-break: break-word; }

    /*.imc--taula[data-tipus="accions"] tbody tr td:last-child { width: 100%; }*/

    div.imc--taula[data-llistat] table td button.imc--img { width: 4em; padding: 0; }
    div.imc--taula[data-llistat] table td button.imc--img::before { width: 2em; height: 2em; }

    /*div.imc--taula[data-llistat] table td button.imc--img.imc--favorit { position: absolute; bottom: .5em; right: 6em; }*/

    div.imc--taula[data-llistat] table .imc--mobil { display: inline; }

    
    div.imc--taula[data-llistat] .imc--nav { flex-direction: column; gap: 1em; }
    div.imc--taula[data-llistat] .imc--nav .imc--rpp { margin-left: 0; }
    div.imc--taula[data-llistat] .imc--nav nav { margin-left: 0; }


    .imc--llegenda ul { flex-direction: column; }

}