@charset "UTF-8";
:root {
  --date-width: calc(10ch + 1em);
  --datetime-width: calc(15ch + 1em);
  --time-width: calc(5ch + .5em);
}

* {
  box-sizing: border-box;
  font-size: inherit;
  border: 0;
}
*:not(li, ul) {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

pre {
  white-space: pre-line;
}

#debugInfo {
  border: 1px solid var(--color-border);
  padding: 0.5em;
  background-color: var(--color-editable);
  overflow: auto;
  font-family: monospace;
  font-size: 0.9em;
}
#debugInfo pre {
  margin: 0;
  padding: 0.5em;
  word-break: break-all;
  max-height: 50%;
  overflow: auto;
}
#debugInfo pre.code-3 {
  color: var(--color-perill);
}
#debugInfo pre:hover {
  background-color: var(--color-fons-2);
}

a:visited, a:link, a:active, a:hover {
  text-decoration: none;
  color: inherit;
}

.table-div > div:first-child .far, .table-div > div:first-child .fa, .table-div > div:first-child .fas, .table-div > div:first-child .fa-solid, .table-div > div:first-child .fa-ligth, .table-div > div:first-child [data-icon], table th .far, table th .fa, table th .fas, table th .fa-solid, table th .fa-ligth, table th [data-icon] {
  padding: 0;
}

.fa-duotone, .fa-sharp-duotone, [data-icon] {
  color: unset;
  --fa-primary-color: var(--color3);
  --fa-secondary-color: var(--color1);
}

.fa, .far, .fas, .fa-solid, .fa-ligth, .fa-duotone, [data-icon] {
  line-height: inherit;
  position: relative;
  padding: 0 0.25em;
  width: auto;
}
.fa.fa-archive::before, .far.fa-archive::before, .fas.fa-archive::before, .fa-solid.fa-archive::before, .fa-ligth.fa-archive::before, .fa-duotone.fa-archive::before, [data-icon].fa-archive::before {
  content: "\f187";
}
.fa.fa-trash::before, .far.fa-trash::before, .fas.fa-trash::before, .fa-solid.fa-trash::before, .fa-ligth.fa-trash::before, .fa-duotone.fa-trash::before, [data-icon].fa-trash::before {
  content: "\f1f8";
}
.fa > span:not(.fa-layers-counter), .far > span:not(.fa-layers-counter), .fas > span:not(.fa-layers-counter), .fa-solid > span:not(.fa-layers-counter), .fa-ligth > span:not(.fa-layers-counter), .fa-duotone > span:not(.fa-layers-counter), [data-icon] > span:not(.fa-layers-counter) {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 0.5em;
  background-color: var(--color-text);
  color: var(--color-text-invertit);
  padding: 0.1em 0.3em;
  text-align: center;
  border-radius: 5px;
}

/* Estils generals */
::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--color-fons);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
}

html .color-gris {
  color: var(--color-text-2);
}
html {
  color: var(--color-text);
  height: 100%;
  font-variant-numeric: tabular-nums;
}
html.dark #content {
  background-color: var(--color-editable);
}
html.dark #content .content .apartat th {
  background-color: var(--color-fons);
}
html.dark #content > .content .apartat, html.dark #content .menu1 .meta-cerca .results, html.dark #content .menu, html.dark #content .menu ul.menu ul {
  background-color: var(--color-fons);
}
html * {
  accent-color: var(--color3);
  caret-color: var(--color3);
}
html input, html select, html textarea, html button, html option {
  background-color: var(--color-editable);
  color: var(--color-text);
  font-family: inherit;
}
html input.tot-majus {
  text-transform: uppercase !important;
}
html input.inicials-majus {
  text-transform: capitalize !important;
}

body {
  background-color: var(--color-fons-pagina);
  width: min(100vw, 100%);
  height: min(100vh, 100%);
  overflow: hidden;
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-template-rows: 1fr min-content;
}
body.surt-al-web label:has(input[type=checkbox].surt-al-web) {
  border-radius: 0.5em;
  padding: 0 0.25em;
}
body.surt-al-web label:has(input[type=checkbox].surt-al-web), body.surt-al-web .surt-al-web {
  background-color: var(--color-avis) !important;
}
body:not(.loaded):not(.first-load) .apartat div.filtres div.dada, body:not(.loaded):not(.first-load) .apartat table, body:not(.loaded):not(.first-load) .apartat .table-div:not(.visible) {
  display: none !important;
}
body.login {
  display: initial;
  background-image: url("./login.jpg");
  background-size: cover;
}
body.login > *:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90vh;
  height: 90dvh;
}
body .apartat.maximized {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 1rem;
  grid-column: unset !important;
  grid-row: unset !important;
}
body .apartat.maximized table td.html > div, body .apartat.maximized table td.html > div, body .apartat.maximized table td.html > div.html, body .apartat.maximized table th.html > div, body .apartat.maximized table th.html > div, body .apartat.maximized table th.html > div.html, body .apartat.maximized .table-div > * > div.html > div, body .apartat.maximized .table-div > * > div.html > div, body .apartat.maximized .table-div > * > div.html > div.html {
  overflow: auto;
  max-width: 50dvw !important;
  max-height: 90dvh !important;
  display: table-cell;
}
body .modal {
  background-color: var(--color-fons-modal);
  position: fixed;
  opacity: 0;
  pointer-events: none;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  transition: all 1s;
  display: flex;
  align-items: center;
  justify-content: center;
}
body .modal.visible {
  opacity: 1;
  pointer-events: auto;
}
body .modal > div {
  padding: 1rem;
  overflow: auto;
  background-color: var(--color-fons);
  max-width: 90vw;
  max-width: 90dvw;
  max-height: 95vh;
  max-height: 95dvh;
  position: relative;
}

[onclick]:not(.cal-horari):not(.cita):hover, .btn-call:hover, .btn-func:hover, a:hover {
  color: var(--color1);
}

.focus-toggle:not(.focus) {
  display: none;
}

[hidden] {
  display: none !important;
}

.html p, #ajuda p {
  margin: 0 0 0.5em 0;
}
.html a, #ajuda a {
  text-decoration: initial;
}
.html ol, .html ul, #ajuda ol, #ajuda ul {
  margin-block-start: inherit;
}
.html ol, #ajuda ol {
  list-style-type: decimal;
  padding-inline-start: 40px;
}

*[data-filtre-g-name] {
  cursor: pointer;
  position: relative;
}
*[data-filtre-g-name]:after {
  font: var(--fa-font-solid);
  content: "\f0b0";
  position: absolute;
  right: -1em;
  font-size: smaller;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  color: var(--color-border);
}
*[data-filtre-g-name]:hover:after {
  opacity: 1;
}

i[data-call=downloadChart] {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0.25rem;
  z-index: 10;
  opacity: 0;
}

.google-visualization-tooltip {
  background-color: var(--color-fons-2) !important;
  border: 1px solid var(--color-border) !important;
  padding: 0.25em !important;
}
.google-visualization-tooltip * {
  font-size: 0.75rem !important;
}

form:has(input[name=NODBcanvis]) .dirty {
  border: 1px dashed var(--color-avis) !important;
}

.graella {
  display: grid;
  grid-auto-columns: minmax(20em, 40em);
  grid-gap: 0 1rem;
  align-content: start;
  height: 100%;
}
.graella .graella-col {
  border-radius: 5px;
  padding: 1rem;
  height: inherit;
  min-height: 500px;
  overflow-y: auto;
  background-color: var(--color-fons-2);
  border: 1px solid var(--color-border);
}
.graella .graella-col-title {
  background-color: var(--color-fons-2);
  position: sticky;
  top: -1rem;
  margin-left: -1rem;
  margin-top: -1rem;
  padding: 1rem;
  z-index: 5;
  text-align: center;
}
.graella .graella-item {
  margin-bottom: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background-color: var(--color-fons);
}
.graella .graella-item.graella-item-plegat .content {
  display: none;
}
.graella .graella-item.graella-item-plegat .graella-item-toggle {
  transform: rotate(180deg);
}
.graella .graella-item .graella-item-toggle {
  cursor: pointer;
  padding: 0 4px;
  font-size: 0.7em;
  opacity: 0.6;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.graella .graella-item .graella-item-toggle:hover {
  opacity: 1;
}
.graella .graella-item .content {
  padding: 0.5rem;
}
.graella .graella-item .content > div {
  padding: 0.15rem 0;
}
.graella .graella-item > div {
  margin: 0.25rem;
}
.graella .graella-item > div:first-child {
  padding: 0.5rem 0.25rem;
  color: var(--color-clar-1);
  margin: -1px 0 0 -1px;
  border-radius: 5px 5px 0 0;
}
.graella .graella-item .flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.graella-item div > .hidden-buttons {
  visibility: hidden;
  opacity: 0;
}
.graella-item div:hover > .hidden-buttons {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

.btn-filtre-estat-oportunitat {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  margin: 0 2px;
  border: 1px solid var(--color-border);
  border-radius: 11px;
  background: var(--color-fons-2);
  font-size: 0.75em;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s ease;
}
.btn-filtre-estat-oportunitat.actiu {
  opacity: 1;
  background: var(--color-fons);
}
.btn-filtre-estat-oportunitat:hover {
  opacity: 0.85;
}

table .drag-parent input[name*=ordre], .table-div .drag-parent input[name*=ordre] {
  display: none !important;
}

table td, table th, .table-div > * > div {
  padding: 0.4rem 0.2rem;
  line-height: 1.8em;
}
table td .far, table td .fa, table td .fas, table th .far, table th .fa, table th .fas, .table-div > * > div .far, .table-div > * > div .fa, .table-div > * > div .fas {
  line-height: 1em;
}
table td > .ts-wrapper, table th > .ts-wrapper, .table-div > * > div > .ts-wrapper {
  width: inherit;
  display: flex;
}
table td > .ts-wrapper > .ts-control, table th > .ts-wrapper > .ts-control, .table-div > * > div > .ts-wrapper > .ts-control {
  width: 0;
  flex: 1;
}
table td:has(.fa-language), table th:has(.fa-language), .table-div > * > div:has(.fa-language) {
  position: relative;
}
table td:has(.fa-language) .fa-language, table th:has(.fa-language) .fa-language, .table-div > * > div:has(.fa-language) .fa-language {
  margin-left: -2em;
}
table td:has(.fa-language) .fa-language, table th:has(.fa-language) .fa-language, .table-div > * > div:has(.fa-language) .fa-language {
  position: absolute;
  top: 0.5em;
  right: 0;
}
table td:has(textarea.full), table th:has(textarea.full), .table-div > * > div:has(textarea.full) {
  position: relative;
}
table td:has(textarea.full) textarea.full, table th:has(textarea.full) textarea.full, .table-div > * > div:has(textarea.full) textarea.full {
  position: absolute;
  top: 0.4rem;
  bottom: 0.4rem;
  left: 0.2rem;
  right: 0.2rem;
  height: auto;
  width: auto;
}
table td:has(textarea.full) textarea.full[style*=height], table th:has(textarea.full) textarea.full[style*=height], .table-div > * > div:has(textarea.full) textarea.full[style*=height] {
  position: static;
}
table td .col-hide, table th .col-hide, .table-div > * > div .col-hide {
  display: flex;
  overflow: hidden;
}
table td .col-hide > *, table th .col-hide > *, .table-div > * > div .col-hide > * {
  width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
table td.col-apilada > input:not([type=checkbox]):not([type=radio]), table td.col-apilada > select, table td.col-apilada > textarea,
table td.col-apilada > span, table td.col-apilada > label, table th.col-apilada > input:not([type=checkbox]):not([type=radio]), table th.col-apilada > select, table th.col-apilada > textarea,
table th.col-apilada > span, table th.col-apilada > label, .table-div > * > div.col-apilada > input:not([type=checkbox]):not([type=radio]), .table-div > * > div.col-apilada > select, .table-div > * > div.col-apilada > textarea,
.table-div > * > div.col-apilada > span, .table-div > * > div.col-apilada > label {
  display: block;
}
table td.col-apilada > input[placeholder="dd/mm/aaaa"], table th.col-apilada > input[placeholder="dd/mm/aaaa"], .table-div > * > div.col-apilada > input[placeholder="dd/mm/aaaa"] {
  width: 100%;
  max-width: 100%;
}
table td.col-apilada > * + *, table th.col-apilada > * + *, .table-div > * > div.col-apilada > * + * {
  margin-top: 0.25em;
}
table td label, table th label, .table-div > * > div label {
  margin: 0;
}
table td input, table td select, table td textarea, table td button, table td .ts-wrapper, table th input, table th select, table th textarea, table th button, table th .ts-wrapper, .table-div > * > div input, .table-div > * > div select, .table-div > * > div textarea, .table-div > * > div button, .table-div > * > div .ts-wrapper {
  margin-left: 0;
}
table td.html, table th.html, .table-div > * > div.html {
  white-space: normal;
  word-break: break-all;
}
table td.html:not(.expand) > div, table th.html:not(.expand) > div, .table-div > * > div.html:not(.expand) > div {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  max-height: 4em;
  max-width: min(25dvw, 40rem);
  max-width: min(25vw, 40rem);
  position: relative;
  cursor: zoom-in;
}
table td.html:not(.expand) > div.plain-text, table th.html:not(.expand) > div.plain-text, .table-div > * > div.html:not(.expand) > div.plain-text {
  white-space: pre-line;
}
table td.html:not(.expand) > div *, table th.html:not(.expand) > div *, .table-div > * > div.html:not(.expand) > div * {
  position: initial;
}
table td.html.expand > div, table th.html.expand > div, .table-div > * > div.html.expand > div {
  background-color: var(--color-editable);
  border: 1px solid var(--color-border);
  box-shadow: 0 50px 50px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  padding: 1rem;
  z-index: 10;
  position: fixed;
  top: 10vh;
  top: 10dvh;
  left: 16vw;
  left: 16dvw;
  width: 68vw;
  width: 68dvw;
  height: 80vh;
  height: 80dvh;
  overflow: auto;
  cursor: zoom-out;
}
table td.html.expand > div textarea, table th.html.expand > div textarea, .table-div > * > div.html.expand > div textarea {
  width: 100%;
  height: 100%;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
table.full, table.automax1, table.automax2 {
  width: 100%;
}
table tr td, table tr th {
  vertical-align: top;
}
table tr td {
  min-height: 3em;
}
table th, table td {
  overflow-wrap: break-word;
  text-wrap: pretty;
  text-align: left;
}
table th.date, table th.date-eu, table td.date, table td.date-eu {
  width: var(--date-width);
  min-width: calc(var(--date-width) - 4ch);
}
table th.time, table td.time {
  width: var(--time-width);
}
table th span.datetime, table td span.datetime {
  min-width: var(--date-width);
  max-width: var(--datetime-width);
}
table th span.datetime span, table td span.datetime span {
  white-space: nowrap;
}
table th.automax, table td.automax {
  width: 32%;
}
table th.automax input, table th.automax textarea:not(.maximized), table th.automax select:not(.tomselected), table th.automax > span, table td.automax input, table td.automax textarea:not(.maximized), table td.automax select:not(.tomselected), table td.automax > span {
  width: 100% !important;
}
table th.automax .ts-wrapper, table td.automax .ts-wrapper {
  max-width: 100%;
}
table th.automin, table td.automin {
  min-width: 1.75em;
  white-space: nowrap;
}
table th > p, table td > p {
  margin: 0;
}
table th.ar, table td.ar {
  text-align: right;
}
table th.ar span, table td.ar span {
  white-space: nowrap;
}
table td {
  border-bottom: 1px solid var(--color-border);
}
table td > span[class^=icon] {
  padding-right: 0;
}
table td.botons {
  display: grid;
  grid-template-columns: repeat(3, min-content);
}
table td img {
  max-width: 100%;
  height: auto !important;
}
table td.min {
  font-size: 0.8rem;
}
table th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-weight: bold;
  color: var(--color-text-2);
  background-color: var(--color-fons);
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
table th > div {
  position: absolute;
  top: 1.5rem;
  width: 100%;
}
table th:not(:hover) .buttons {
  visibility: hidden;
}
table th.ar {
  padding-left: 1em;
}
table th.ar .buttons {
  position: absolute;
  left: 0;
}
table th.sortasc, table th.sortdesc {
  padding-left: calc(0.2rem + 1em);
}
table th.sortasc::before, table th.sortdesc::before {
  position: absolute;
  top: 0.4rem;
  left: 0.2rem;
  font: var(--fa-font-regular);
  font-size: 0.85em;
  line-height: inherit;
}
table th.sortasc::before {
  content: "\f062";
}
table th.sortdesc::before {
  content: "\f063";
}
table.automax2 td.automax, table.automax2 th.automax {
  width: 50%;
}
table.automax1 td.automax, table.automax1 th.automax {
  width: 100%;
}

table.btns-fixos th.col-btns1, table.btns-fixos th.col-btns2, table.btns-fixos td.col-btns1, table.btns-fixos td.col-btns2 {
  position: sticky;
  z-index: 1;
  background-color: var(--color-fons);
}
table.btns-fixos th.col-btns2, table.btns-fixos td.col-btns2 {
  right: 0;
}
table.btns-fixos th.col-btns1, table.btns-fixos td.col-btns1 {
  right: var(--col-btns-w, 4em);
}
table.btns-fixos td.col-btns1, table.btns-fixos td.col-btns2 {
  width: var(--col-btns-w, 4em);
  min-width: var(--col-btns-w, 4em);
  max-width: var(--col-btns-w, 4em);
}
table.btns-fixos:has(td.col-btns2[hidden]) th.col-btns1, table.btns-fixos:has(td.col-btns2[hidden]) td.col-btns1 {
  right: 0;
}
table.btns-fixos th.col-btns1, table.btns-fixos th.col-btns2 {
  z-index: 2;
}
table.btns-fixos th.col-btns1:empty, table.btns-fixos th.col-btns2:empty {
  right: auto;
}
table.btns-fixos tr.il:hover > td.col-btns1, table.btns-fixos tr.il:hover > td.col-btns2 {
  background-image: linear-gradient(var(--color-hover), var(--color-hover));
}

tbody.hidden > tr {
  opacity: 1;
  transition: all 0.2s ease-in-out;
}
tbody.hidden > tr:not(:first-child) {
  display: none;
  opacity: 0;
}

table.agenda td {
  vertical-align: baseline;
}
table.agenda th {
  background-color: var(--color-editable);
}
table.agenda td:last-child, table.agenda th:last-child {
  text-align: right;
}

.table-div {
  display: table;
  width: 99%;
  margin-bottom: 0.5em;
}
.table-div > * {
  display: table-row;
}
.table-div > *:hover {
  background-color: var(--color-hover);
}
.table-div > *:first-child {
  display: table-header-group;
  font-weight: bolder;
}
.table-div > *:first-child > * {
  position: sticky;
  top: 0;
  background-color: var(--color-fons);
  border: 0;
  z-index: 2;
}
.table-div > *:first-child > *.date, .table-div > *:first-child > *.date-eu {
  width: var(--date-width);
  min-width: var(--date-width);
}
.table-div > *:first-child > *.time {
  width: var(--time-width);
}
.table-div > *:first-child > *.datetime {
  width: var(--datetime-width);
}
.table-div > *:first-child > *.ar {
  padding-right: 1em;
}
.table-div > *:first-child > *.sortasc, .table-div > *:first-child > *.sortdesc {
  padding-left: calc(0.2rem + 1em);
}
.table-div > *:first-child > *.sortasc::before, .table-div > *:first-child > *.sortdesc::before {
  position: absolute;
  top: 0.4rem;
  left: 0.2rem;
  font: var(--fa-font-regular);
  font-size: 0.85em;
  line-height: inherit;
}
.table-div > *:first-child > *.sortasc::before {
  content: "\f062";
}
.table-div > *:first-child > *.sortdesc::before {
  content: "\f063";
}
.table-div > *:first-child > *.fixed {
  width: 1.25em;
}
.table-div > * > form {
  vertical-align: middle;
}
.table-div > * > * {
  display: table-cell;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.table-div > * > *.date {
  width: var(--date-width);
  min-width: calc(var(--date-width) - 4ch);
}
.table-div > * > *.automin {
  width: 1.5em;
}
.table-div > * > *.automin.fix {
  max-width: 1.5em;
}
.table-div > * > *.ar {
  text-align: right;
}
.table-div > * > * > textarea, .table-div > * > * > .ts-wrapper, .table-div > * > * > select, .table-div > * > * > input:not([type=checkbox]):not([type=radio]) {
  width: 100%;
}
.table-div > * > *:not(:hover) .buttons {
  visibility: hidden;
}

.drag-child, th[draggable] {
  cursor: move;
  background-color: transparent;
}

i.drag-child, i.drag-cap {
  width: 1em;
  text-align: center;
  vertical-align: middle;
  color: var(--color-text-2);
}

i.drag-child {
  cursor: grab;
}

input, .btnInput, select, textarea, button, .ts-wrapper {
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  margin: 0 0.3rem 0 0.2rem;
  background-color: var(--color-editable);
}
input.html, .btnInput.html, select.html, textarea.html, button.html, .ts-wrapper.html {
  visibility: hidden;
}
input:focus, .btnInput:focus, select:focus, textarea:focus, button:focus, .ts-wrapper:focus {
  outline: none;
}
input:focus:not(.maximized), .btnInput:focus:not(.maximized), select:focus:not(.maximized), textarea:focus:not(.maximized), button:focus:not(.maximized), .ts-wrapper:focus:not(.maximized) {
  background-color: var(--color-editable);
  box-shadow: 0 0 2px 1px var(--color3);
}
input.autosize, .btnInput.autosize, select.autosize, textarea.autosize, button.autosize, .ts-wrapper.autosize {
  max-height: 75vh;
  max-height: 75dvh;
}
input.invalid[type=checkbox]::after, input:invalid[type=checkbox]::after, .btnInput.invalid[type=checkbox]::after, .btnInput:invalid[type=checkbox]::after, select.invalid[type=checkbox]::after, select:invalid[type=checkbox]::after, textarea.invalid[type=checkbox]::after, textarea:invalid[type=checkbox]::after, button.invalid[type=checkbox]::after, button:invalid[type=checkbox]::after, .ts-wrapper.invalid[type=checkbox]::after, .ts-wrapper:invalid[type=checkbox]::after {
  font: var(--fa-font-regular);
  content: "\f071";
  margin-left: 0.5em;
}
input.invalid, input:invalid, .btnInput.invalid, .btnInput:invalid, select.invalid, select:invalid, textarea.invalid, textarea:invalid, button.invalid, button:invalid, .ts-wrapper.invalid, .ts-wrapper:invalid {
  border: 1px solid var(--color-perill) !important;
  color: var(--color-perill) !important;
}
input.invalid + .ts-wrapper, input:invalid + .ts-wrapper, .btnInput.invalid + .ts-wrapper, .btnInput:invalid + .ts-wrapper, select.invalid + .ts-wrapper, select:invalid + .ts-wrapper, textarea.invalid + .ts-wrapper, textarea:invalid + .ts-wrapper, button.invalid + .ts-wrapper, button:invalid + .ts-wrapper, .ts-wrapper.invalid + .ts-wrapper, .ts-wrapper:invalid + .ts-wrapper {
  border: 1px solid var(--color-perill) !important;
  color: var(--color-perill) !important;
}
input[disabled]:not(.indeterminate), input[readonly]:not(.indeterminate), .btnInput[disabled]:not(.indeterminate), .btnInput[readonly]:not(.indeterminate), select[disabled]:not(.indeterminate), select[readonly]:not(.indeterminate), textarea[disabled]:not(.indeterminate), textarea[readonly]:not(.indeterminate), button[disabled]:not(.indeterminate), button[readonly]:not(.indeterminate), .ts-wrapper[disabled]:not(.indeterminate), .ts-wrapper[readonly]:not(.indeterminate) {
  color: gray;
  cursor: not-allowed;
  background-color: var(--color-fons-2);
}

/* Avís de correu rebutjat que obre el cercador (#248071): la icona, sense aspecte de botó. */
button.emailRebutjatCercador {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a.telefon, span.telefon {
  white-space: nowrap;
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
input[type=radio] {
  margin: 0 0.1em 0 0.25em;
}
input[type=email]:not(.emailBounced) + i.textAlerta,
input[type=email]:not(.emailBounced) + button.emailRebutjatCercador {
  display: none;
}
input[type=checkbox], input[type=radio] {
  transform: scale(1.2);
  margin-left: 0.1em !important;
}
input[type=time] {
  flex: none;
  padding-right: 0;
  width: calc(4.5ch + 0.8rem);
  height: 1.582em;
}
input[type=time i] {
  width: calc(5ch + 2em + 0.8rem);
}
input[type=number]:not(.numInput) {
  text-align: right;
  appearance: textfield;
}
input[type=number]:not(.numInput)::-webkit-outer-spin-button, input[type=number]:not(.numInput)::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=color] {
  vertical-align: text-bottom;
  padding: 0 !important;
  border: none !important;
  height: 1.25em;
  width: 1.25em;
}
input[type=file].auto:not(.dirty):not(.expand) {
  background: none;
  white-space: nowrap;
  max-width: 1.5em;
  overflow: hidden;
  text-overflow: ellipsis;
}
input[type=file].auto:not(.dirty):not(.expand)::before {
  font: var(--fa-font-regular);
  content: "\f0c6";
}
input[name=nif], input[name=nie], input[name=cif] {
  font-variant-numeric: tabular-nums;
  width: calc(8ch + 1em + 0.8rem);
  max-width: calc(8ch + 1em + 0.8rem);
}
input[placeholder="dd/mm/aaaa"], input .date {
  width: var(--date-width);
  max-width: var(--date-width);
}
input[placeholder="hh:mm"], input .date {
  width: calc(5ch + 0.8rem);
  max-width: calc(5ch + 0.8rem);
}
input[type=tel] {
  max-width: calc(12ch + 0.8rem + 4px);
}
input[placeholder="hh:mm:ss dd/mm/aa"], input[placeholder="dd/mm/aaaa hh:mm"], input.datetime {
  width: var(--datetime-width);
  max-width: var(--datetime-width);
}
input[type=number], input[placeholder*="dd/mm/aaaa"], input[placeholder*="hh:mm"], input[type=datetime-local], input[type=tel], input[type=time] input.datetime {
  font-variant-numeric: tabular-nums;
}

select.invalid + .ts-wrapper {
  border: 1px solid red;
  color: red;
}
select optgroup[disabled] {
  display: none;
}
select optgroup[disabled] option {
  display: none;
}

textarea.maximized {
  position: fixed;
  top: 5vh;
  top: 5dvh;
  height: 85vh !important;
  height: 85dvh !important;
  left: 7vw;
  left: 7dvw;
  width: 90vw !important;
  width: 90dvw !important;
  z-index: 10;
  border: 0.5em solid var(--color-border);
  transition: width 1s linear;
}

progress {
  text-align: center;
  height: 1.5em;
  width: 100%;
  border: 1px solid var(--color-border);
  background-color: var(--color-editable);
  position: relative;
  -webkit-appearance: none;
}
progress::before {
  content: attr(data-label);
  color: var(--color-text-2);
  font-size: 0.8em;
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(-0.2em);
}
progress::-webkit-progress-bar {
  background-color: var(--color-editable);
}
progress::-webkit-progress-value {
  background-color: var(--color3);
}

.circle-progress {
  width: 100%;
  height: 100%;
}
.circle-progress .circle-progress-value, .circle-progress .circle-progress-text {
  stroke: var(--color3);
  font-size: 1.7em;
}

.circle-svg {
  display: block;
  max-height: 3rem;
}
.circle-svg text {
  text-align: center;
  color: black;
  font-size: 10px;
}
.circle-svg path.percent {
  stroke: var(--color3);
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
}
.circle-svg path.around {
  stroke: #c4c4c4;
  fill: none;
  stroke-width: 2.8;
}
@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.dada {
  float: left;
  display: flex;
  align-items: center;
  padding: 0 0.4rem 0 0;
  line-height: 2.3rem;
  white-space: nowrap;
}
.dada input[name=carrer], .dada input[name=adreca] {
  min-width: min(50vw, 25em) !important;
}
.dada:has(p) {
  align-items: baseline;
}
.dada:has(p) > .ts-wrapper {
  flex: 1;
}
.dada > p, .dada > label > p {
  line-height: initial;
  margin: 0.5em 0;
  text-wrap: pretty;
}
.dada .dada {
  padding: 0;
}
.dada:has(.fa-language) {
  position: relative;
}
.dada:has(.fa-language) .fa-language {
  margin-left: -2em;
}
.dada:has(.fa-language):has(textarea) .fa-language {
  position: absolute;
  top: 0;
  right: 1em;
}
@media (max-width: 30rem) {
  .dada {
    display: flex;
    flex-flow: row wrap;
  }
  .dada input:not([pattern]), .dada select, .dada textarea {
    flex: 1;
  }
}
.dada > label {
  align-items: center;
  min-height: 2.3rem;
}
.dada > label input[type=checkbox], .dada > label input[type=radio] {
  margin-right: 0.4em;
}
.dada > label[onclick]:not([onclick=""]) {
  text-decoration: underline dotted;
  text-underline-position: under;
}
.dada > label.etiquetaAvis {
  min-width: 6em;
  padding-right: 0.4em;
  color: var(--color-text-2);
  font-size: 0.9rem;
}
.dada.full:not(.flex), .dada.half:not(.flex) {
  flex-wrap: wrap;
}
.dada.full textarea, .dada.full textarea + div, .dada.half textarea, .dada.half textarea + div {
  width: 99%;
}

.etiqueta-grup {
  min-height: 1.5em;
}
.etiqueta-grup:not(:hover):not(:focus-within) .btn-add {
  display: none;
}
.etiqueta-grup .ts-wrapper {
  display: inline-block;
  vertical-align: middle;
}
.etiqueta-grup .tipus-etiqueta {
  vertical-align: initial;
}
.etiqueta-grup .tipus-etiqueta:not(:hover) i {
  display: none;
}

.etiqueta, label {
  margin: 0 0.25rem;
  color: var(--color-text-2);
}
.etiqueta.web, label.web {
  text-decoration: underline dotted var(--color-border);
}
.etiqueta input[type=checkbox], .etiqueta input[type=radio], label input[type=checkbox], label input[type=radio] {
  margin-top: 0.1em;
  margin-right: 0.2em;
}
.etiqueta.tipus-etiqueta, label.tipus-etiqueta {
  padding: 0.2em 0.4em;
  margin-right: 0.4em;
  border-radius: 5px;
  color: var(--color-clar-2);
  font-weight: 500;
  background-color: var(--color3);
  font-size: 0.8em;
  text-transform: none;
  max-width: max(15em, 10vw);
  max-width: max(15em, 10dvw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: baseline;
  position: relative;
}
.etiqueta.tipus-etiqueta > span:first-child, label.tipus-etiqueta > span:first-child {
  overflow-x: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}
.etiqueta.tipus-etiqueta .btns-amagats, label.tipus-etiqueta .btns-amagats {
  line-height: 1.6em;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0 5px 5px 0;
  padding: 0 0.2em;
  margin: 0;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  background-color: var(--color-editable);
  color: var(--color-text);
}
.etiqueta.tipus-etiqueta:hover, label.tipus-etiqueta:hover {
  max-width: none;
}
.etiqueta.tipus-etiqueta:hover .btns-amagats, label.tipus-etiqueta:hover .btns-amagats {
  pointer-events: initial;
  opacity: 1;
}

.ar {
  text-align: right;
}

.areaText {
  display: block;
  overflow-y: auto;
}

.hidden-distraction #dades {
  border: 2px solid orange;
}

[data-show-hide-fields]:not(.enabled)::after {
  font: var(--fa-font-regular);
  font-weight: 300;
  content: "\f102";
  margin-left: 0.5em;
}
[data-show-hide-fields].enabled::after {
  font: var(--fa-font-regular);
  font-weight: 300;
  content: "\f103";
  margin-left: 0.5em;
}

div.grafic div {
  overflow: hidden;
}

[id^=widget_] {
  position: relative;
}
[id^=widget_] table tr {
  vertical-align: top;
}
[id^=widget_] .hidden-widget {
  display: none;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(max(18rem, 20vw), 100%), 1fr));
}
.cards .cards-s {
  grid-template-columns: repeat(auto-fit, minmax(min(7rem, 100%), auto));
}
.cards .cards-l {
  grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), auto));
}

.card-foto-2 {
  display: grid;
  grid-template-columns: min-content minmax(0, 1fr) min-content;
  grid-template-rows: min-content auto;
  gap: 0.25em 0.5em;
  padding: 0.5em;
  align-items: start;
}
.card-foto-2 .marc-foto {
  position: relative;
  grid-column: 1;
  grid-row: 1/3;
  outline: 2px solid var(--color-border);
  background-position: center;
  color: var(--color-text-2);
  aspect-ratio: 1/1;
  width: 3em;
}
.card-foto-2 .marc-foto:has(img) {
  aspect-ratio: unset;
}
.card-foto-2 .marc-foto img {
  aspect-ratio: 1/1;
  width: 3em;
  border-radius: 50%;
  object-fit: cover;
}
.card-foto-2 .marc-foto i {
  position: absolute;
  font-size: 1.8em;
  color: var(--color1);
}
.card-foto-2 .marc-foto.cuadrat img {
  border-radius: 0;
  object-fit: contain;
  max-width: calc(100% - 0.25em);
  max-height: calc(100% - 0.25em);
}
.card-foto-2 .marc-foto.cuadrat {
  background-size: contain;
  background-repeat: no-repeat;
  background-color: inherit;
  border-radius: 4px;
  color: var(--color1);
}
.card-foto-2 .marc-foto span {
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}
.card-foto-2 .titol {
  color: var(--color-text);
  position: relative;
  grid-row: 1;
  grid-column: 2;
  max-width: 100%;
  font-weight: 500;
  text-wrap: pretty;
}
.card-foto-2 .subtitol {
  color: var(--color-text);
  position: relative;
  grid-row: 2;
  grid-column: 2;
  font-size: smaller;
  max-width: 100%;
  font-weight: 300;
  display: flex;
  align-items: baseline;
  min-height: 1.5em;
  justify-content: space-between;
  text-wrap: pretty;
}
.card-foto-2 .subtitol .estic-ubicacio {
  margin-left: 0.25em;
  font-weight: normal;
  color: var(--color-text-2);
  white-space: nowrap;
}
.card-foto-2 .subtitol .estic-ubicacio i {
  margin-right: 0.15em;
}
.card-foto-2:hover .buttons {
  opacity: 1;
  pointer-events: auto;
}
.card-foto-2 .buttons {
  background-color: var(--color-fons);
  position: absolute;
  right: 0;
  opacity: 0;
  pointer-events: none;
}

#apunt {
  position: fixed;
  padding: 3.5rem;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
}
#apunt:not(:has(.apartat)) {
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.25);
}
#apunt:has(.apartat) {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.35);
}
#apunt:has(.apartat) .apartat {
  pointer-events: auto;
}
#apunt > .apartat {
  max-width: calc(100% - 2rem);
  max-height: calc(100% - 2rem);
  height: 85dvh;
  height: 85vh;
  pointer-events: auto;
}
#apunt > .apartat .peuApartat {
  margin: 0 calc(-1rem - 1px) calc(-1rem - 1px);
}

#abastRegistreInfo {
  width: 1.5em;
  overflow: hidden;
  float: right;
  white-space: nowrap;
}
#abastRegistreInfo:hover {
  width: auto;
}

.loading {
  opacity: 0.5;
  transition: opacity 0.5s ease-in-out;
}
.loading:hover {
  cursor: wait;
}

.marc-foto {
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.id-registre {
  font-family: monospace;
  font-size: 0.85em;
  opacity: 0.7;
}

.foto-inicials {
  position: relative;
  height: 100%;
  aspect-ratio: 170/210;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color3);
  color: #fff;
}
.foto-inicials .inicials {
  font-size: 2.5em;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.foto-inicials .cam {
  position: absolute;
  right: 0.4em;
  bottom: 0.4em;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.btn-elimina-foto {
  position: absolute;
  right: 0.4em;
  bottom: 0.4em;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  border: none;
  cursor: pointer;
  padding: 0;
}
.btn-elimina-foto:hover {
  background: rgba(255, 220, 220, 0.95);
  color: #c00;
}

.fotoContextMenu {
  position: fixed;
  z-index: 1000;
  background-color: var(--color-editable);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  padding: 0.25em;
  display: flex;
  flex-flow: column;
  min-width: 12em;
}
.fotoContextMenu button {
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0.5em 0.75em;
  color: inherit;
  border-radius: 4px;
  cursor: pointer;
}
.fotoContextMenu button:hover {
  background-color: var(--color-fons-2);
}

.marc_pagina .pagina {
  width: 0;
  height: 0;
  overflow: hidden;
  transition: all 0.3s linear;
}
.marc_pagina .pagina.active {
  width: auto;
  height: auto;
  opacity: 1;
}
.marc_pagina .paginador {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
.marc_pagina .paginador__num, .marc_pagina .paginador__btn, .marc_pagina .paginador__punts {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.2rem;
  font-size: 0.65rem;
  width: 1rem;
  height: 1rem;
}
.marc_pagina .paginador__punts {
  cursor: initial;
}
.marc_pagina .paginador__num, .marc_pagina .paginador__btn {
  border-radius: 50%;
}
.marc_pagina .paginador__num.active, .marc_pagina .paginador__btn.active {
  color: var(--color-text-invertit);
  background-color: var(--color3);
  font-weight: 600;
  border: 1px solid var(--color3);
}

.timeline .vl {
  border-left: 2px;
  border-style: dashed;
  border-color: var(--color-border);
  height: 100%;
  left: 0.65em;
  position: absolute;
}
.timeline .timeline-item {
  display: grid;
  grid-template-columns: 1.8em auto;
  min-height: 3em;
}
.timeline .timeline-line {
  position: relative;
}
.timeline .timeline-line i.far, .timeline .timeline-line [data-icon] {
  position: absolute;
  top: 1.1em;
  background-color: var(--color-fons);
}
.timeline .timeline-content {
  display: flex;
  flex-flow: column;
  gap: 0.75em;
  padding: 1em 0.25em;
}
.timeline time, .timeline .time {
  font-size: smaller;
}

.btns-amagats {
  position: relative;
}
.btns-amagats:hover .btns-amagats {
  opacity: 1;
  right: -25%;
  visibility: visible;
  background-color: var(--color-fons-2);
  transition: opacity 0.3s ease-in-out;
  z-index: 100;
}
.btns-amagats .btns-amagats {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 0.5em;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.heart-beat {
  animation: borde-parpadeo 1s ease-in-out infinite alternate;
}

@keyframes borde-parpadeo {
  0% {
    outline-color: var(--color-avis);
  }
  100% {
    outline-color: rgba(255, 255, 255, 0.25);
  }
}
#content {
  background-color: var(--color-fons);
  grid-column: 1/-1;
  grid-row: 1/-1;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(0, 3fr) minmax(16rem, 1fr);
  grid-template-rows: min-content min-content auto min-content;
  grid-template-areas: "head1 head2 head3 " "menu menu menu" "content content content" "foot1 foot2 foot3";
}
@media (max-width: 30rem) {
  #content {
    grid-template-columns: min-content 1fr;
    grid-template-rows: min-content min-content auto min-content;
    grid-template-areas: "head1 head3" "menu menu" "content content" "head2 head2 " "foot1 foot1" "foot2 foot2" "foot3 foot3";
  }
  #content td > span {
    white-space: normal;
  }
}
#content .hidden-distraction:not(.always-visible) {
  display: none !important;
}
#content .relative {
  position: relative;
}
@media (max-width: 30rem) {
  #content .relative {
    position: initial;
  }
}
#content nav {
  grid-column: 1/-1;
}
#content nav ul {
  display: flex;
  flex-flow: row wrap;
}
#content nav ul li a {
  padding: 0.5em 1em;
}
@keyframes widgetResizePols {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.012);
  }
  100% {
    transform: scale(1);
  }
}
#content > .content {
  grid-area: content;
  display: grid;
  grid-auto-flow: row dense;
  grid-auto-rows: max(13rem, 20%);
  grid-template-rows: repeat(auto-fit, minmax(max(13rem, 18vh), auto));
  grid-template-columns: repeat(auto-fit, minmax(max(23rem, 20vw), 1fr));
  overflow-y: auto;
  padding: 0.8rem 0.8rem 7rem 0.8rem;
  column-gap: 0.4rem;
  row-gap: 0.25rem;
}
#content > .content#modulInfrastructuresCotreball {
  grid-template-rows: min-content;
}
#content > .content [data-id-widget^=widget_empresesActives_] {
  align-self: start;
}
#content > .content [data-id-widget^=widget_empresesActives_] .numCoworking {
  display: flex;
  flex-flow: column;
  gap: 0.25rem;
}
#content > .content [data-id-widget^=widget_empresesActives_] .filtrat {
  font-weight: bold;
}
@media (max-width: 30rem) {
  #content > .content {
    grid-template-columns: 100%;
    grid-template-areas: "center" "left" "right";
    grid-auto-rows: min-content;
    padding: 0;
  }
}
#content > .content > .fa-duotone.btn-call[data-call=resizeWidgetReset] {
  opacity: 0;
  position: absolute;
  right: 0.25rem;
  bottom: 3rem;
}
#content > .content:hover > .fa-duotone.btn-call[data-call=resizeWidgetReset] {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in-out;
}
#content > .content .apartat {
  max-width: calc(100% - 1rem);
  background-color: var(--color-editable);
  box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.1);
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  flex-flow: column;
}
#content > .content .apartat:has(.btn-cerca-g) {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  left: auto;
  top: auto;
  transform: none;
  z-index: 1050;
  max-width: min(92vw, 26rem);
  min-width: 0;
  background: transparent !important;
  border: none;
  box-shadow: none;
  overflow: visible;
  padding: 0;
  display: flex;
  flex-flow: column;
  align-items: flex-end;
  gap: 0.6rem;
}
#content > .content .apartat:has(.btn-cerca-g) > h1, #content > .content .apartat:has(.btn-cerca-g) > div.h1 {
  display: none;
}
#content > .content .apartat:has(.btn-cerca-g) > .draggable {
  order: 1;
  display: none;
  flex-flow: column;
  gap: 0.5rem;
  width: max-content;
  max-width: 100%;
  max-height: 80vh;
  overflow: auto;
  background-color: var(--color3);
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
  box-shadow: 0 8px 30px 0 rgba(34, 41, 47, 0.25);
}
#content > .content .apartat:has(.btn-cerca-g) > .draggable label, #content > .content .apartat:has(.btn-cerca-g) > .draggable i {
  color: var(--color-text-invertit);
}
#content > .content .apartat:has(.btn-cerca-g) > .draggable > div:first-child i, #content > .content .apartat:has(.btn-cerca-g) > .draggable > div:last-child i {
  font-size: large;
}
#content > .content .apartat:has(.btn-cerca-g).obert > .draggable {
  display: flex;
}
#content > .content .apartat:has(.btn-cerca-g) .filtre-panell-fab__btn {
  order: 2;
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--color3);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 4px 18px 0 rgba(34, 41, 47, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}
#content > .content .apartat:has(.btn-cerca-g) .filtre-panell-fab__btn i {
  color: #fff;
  pointer-events: none;
}
#content > .content .apartat:has(.btn-cerca-g) .filtre-panell-fab__btn:hover {
  transform: scale(1.08);
}
#content > .content .apartat:has(.btn-cerca-g) .filtre-panell-fab__btn:active {
  transform: scale(0.93);
}
#content > .content .apartat:has(.btn-cerca-g) .filtre-panell-fab__num {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-avis);
  color: var(--color-fosc-1);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
}
#content > .content .apartat:has(.btn-cerca-g) .filtre-panell-resum {
  order: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  max-width: 100%;
  border: none;
  cursor: pointer;
  text-align: right;
  background: var(--color3);
  color: #fff;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
  box-shadow: 0 6px 20px 0 rgba(34, 41, 47, 0.25);
}
#content > .content .apartat:has(.btn-cerca-g).obert .filtre-panell-resum {
  display: none;
}
#content > .content .apartat:has(.btn-cerca-g) .filtre-panell-resum__cap {
  opacity: 0.75;
}
#content > .content .apartat:has(.btn-cerca-g) .filtre-panell-resum__xip {
  min-width: 0;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#content > .content .apartat:has(.btn-cerca-g) .btns-resize-widget,
#content > .content .apartat:has(.btn-cerca-g) .widget-resize-handle {
  display: none;
}
#content > .content .apartat:hover:not(:has(.btn-cerca-g)) .btns-resize-widget {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in-out;
}
#content > .content .apartat .btns-resize-widget {
  position: absolute;
  bottom: 0;
  left: 0;
  width: max-content;
  padding: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
#content > .content .apartat .btns-resize-widget .widget-drag-handle {
  cursor: grab;
  touch-action: none;
}
#content > .content .apartat .btns-resize-widget .widget-drag-handle:active {
  cursor: grabbing;
}
#content > .content .apartat::after {
  display: none !important;
}
#content > .content .apartat .widget-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1.15rem;
  height: 1.15rem;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 0.12rem 0.05rem 0;
  font-size: 0.8rem;
  line-height: 1;
  color: var(--color3);
  cursor: nwse-resize;
  touch-action: none;
  opacity: 0;
  z-index: 6;
  transition: opacity 0.3s ease-in-out;
}
#content > .content .apartat .widget-resize-handle:hover {
  opacity: 1;
}
#content > .content .apartat .widget-resize-handle i {
  pointer-events: none;
}
#content > .content .apartat .widget-resize-handle--x {
  bottom: 50%;
  top: auto;
  right: 0;
  transform: translateY(50%);
  width: 1rem;
  height: 1.4rem;
  align-items: center;
  justify-content: flex-end;
  padding: 0 0.1rem 0 0;
  cursor: ew-resize;
}
#content > .content .apartat .widget-resize-handle--y {
  bottom: 0;
  right: 50%;
  transform: translateX(50%);
  width: 1.4rem;
  height: 1rem;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 0.05rem 0;
  cursor: ns-resize;
}
#content > .content .apartat:hover .widget-resize-handle {
  opacity: 0.5;
}
#content > .content .apartat {
  transition: box-shadow 0.2s ease, outline-color 0.2s ease;
  outline: 2px solid transparent;
  outline-offset: -2px;
}
#content > .content .apartat.widget-resizing,
#content > .content .apartat.widget-dragging {
  user-select: none;
  z-index: 10;
  box-shadow: 0 12px 40px 0 rgba(34, 41, 47, 0.28);
  outline-color: var(--color3);
}
#content > .content .apartat.widget-resizing .widget-resize-handle,
#content > .content .apartat.widget-dragging .widget-resize-handle {
  opacity: 1;
}
#content > .content .apartat.widget-dragging {
  opacity: 0.5;
}
#content > .content .apartat.widget-resize-pols {
  animation: widgetResizePols 0.22s ease;
}
#content > .content .apartat .apartat {
  box-shadow: none;
  border: 0;
  padding: 0;
  margin: 0;
}
@media (max-width: 30rem) {
  #content > .content .apartat.fade-out {
    display: none;
  }
  #content > .content .apartat {
    grid-column: 1 !important;
    grid-row: initial !important;
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}
#content > .content .apartat > * {
  width: 100%;
  max-height: 100%;
}
#content > .content .apartat > *:not(.titolApartat):not(h1):not(.h1) {
  overflow: auto;
}
#content > .content .apartat > *:not(.titolApartat):not(h1):not(.h1):not(.cards) {
  flex-grow: 1;
}
#content > .content .apartat > *.cards {
  height: initial;
}
#content > .content .apartat th {
  background-color: var(--color-editable);
}
#content .menu1 {
  padding: 0.5rem 1.2rem;
  display: flex;
  align-items: center;
  color: var(--color-clar-1);
  background-color: var(--color3);
  z-index: 10;
}
#content .menu1 ul, #content .menu1 ol, #content .menu1 li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#content .menu1 .apartat {
  position: absolute;
  top: 4rem;
  right: 0;
  max-width: 50vw;
  max-width: 50dvw;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  box-shadow: 0 0 1px rgba(20, 20, 31, 0.05), 0 2px 7px 1px rgba(20, 20, 31, 0.16);
}
#content .menu1 .apartat.loading {
  opacity: 0.5;
  transition: opacity 0.25s ease-in-out;
}
@media (max-width: 30rem) {
  #content .menu1 .apartat {
    bottom: 2.5rem;
    top: initial;
    max-width: 97vw;
    max-width: 97dvw;
    left: 1vw;
    left: 1dvw;
    right: initial;
  }
}
#content .menu1.menu1-1 {
  grid-area: head1;
}
@media (max-width: 30rem) {
  #content .menu1.menu1-1 img {
    display: none;
  }
}
#content .menu1.menu1-2 {
  display: flex;
  justify-content: center;
  grid-area: head2;
}
#content .menu1.menu1-2 .apartat {
  min-width: 50vw;
  min-width: 50dvw;
  background-color: var(--color-editable);
  color: var(--color-text);
}
#content .menu1.menu1-2 .far, #content .menu1.menu1-2 .fa, #content .menu1.menu1-2 .fab, #content .menu1.menu1-2 .fa-light, #content .menu1.menu1-2 .fa-brands, #content .menu1.menu1-2 [data-icon] {
  font-size: 1.3em;
}
#content .menu1.menu1-3 {
  position: relative;
  grid-area: head3;
  column-gap: 1rem;
  padding-right: 1.7rem;
}
#content .menu1.menu1-3 .marc-foto {
  width: 3em;
  min-width: 3em;
  height: 3em;
  min-height: 3em;
}
#content .menu1.menu1-3:has(.usuari-menu-widget:not([hidden])) {
  z-index: 101;
}
#content .menu1 input::placeholder {
  color: hsla(0, 0%, 100%, 0.6);
}
#content .menu1 .estic {
  display: flex;
  justify-content: flex-end;
}
#content .menu1 .estic .estic-text {
  font-size: 0.8em;
  cursor: pointer;
}
#content .menu1 .estic .estic-ubicacio {
  font-size: 0.8em;
  cursor: pointer;
  opacity: 0.8;
}
#content .menu1 .usuari-menu-widget {
  right: 1rem;
  width: max-content;
  padding: 0;
  max-width: 96vw;
  max-width: 96dvw;
  border-radius: 10px;
  background-color: var(--color-editable);
  color: var(--color-text);
  text-align: left;
  cursor: default;
}
html.dark #content .menu1 .usuari-menu-widget {
  background-color: var(--color-fons);
}
@media (max-width: 30rem) {
  #content .menu1 .usuari-menu-widget {
    position: fixed;
    z-index: 100;
    top: 4rem;
    bottom: initial;
    left: 2vw;
    right: 2vw;
    width: auto;
  }
}
#content .menu1 .usuari-menu-widget .mega-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(14rem, max-content));
}
#content .menu1 .usuari-menu-widget .mega-menu.mega-menu-3 {
  grid-template-columns: repeat(3, minmax(14rem, max-content));
}
@media (max-width: 30rem) {
  #content .menu1 .usuari-menu-widget .mega-menu {
    grid-template-columns: 1fr;
  }
  #content .menu1 .usuari-menu-widget .mega-menu.mega-menu-3 {
    grid-template-columns: 1fr;
  }
}
#content .menu1 .usuari-menu-widget section {
  padding: 1rem 0.5rem;
}
#content .menu1 .usuari-menu-widget section + section {
  border-left: 1px solid var(--color-border);
}
@media (max-width: 30rem) {
  #content .menu1 .usuari-menu-widget section + section {
    border-left: 0;
    border-top: 1px solid var(--color-border);
  }
}
#content .menu1 .usuari-menu-widget h4 {
  margin: 0 0 0.5rem;
  padding: 0 0.75rem;
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-2);
}
#content .menu1 .usuari-menu-widget ul + h4 {
  margin-top: 1rem;
}
#content .menu1 .usuari-menu-widget li {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  white-space: nowrap;
  text-transform: none;
  cursor: pointer;
}
#content .menu1 .usuari-menu-widget li:hover {
  background-color: var(--color-hover);
}
#content .menu1 .usuari-menu-widget li > i, #content .menu1 .usuari-menu-widget li > span > i {
  min-width: 1.8em;
  font-size: 1.1em;
  text-align: center;
}
#content .menu1 .usuari-menu-widget .mega-menu-tema {
  flex-flow: column;
  align-items: stretch;
  gap: 0.5rem;
  cursor: default;
}
#content .menu1 .usuari-menu-widget .mega-menu-tema:hover {
  background-color: transparent;
}
#content .menu1 .usuari-menu-widget .mega-menu-tema > span:first-child {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
#content .menu1 .usuari-menu-widget .mega-menu-segment {
  display: flex;
  padding: 2px;
  border-radius: 6px;
  background-color: var(--color-hover);
}
#content .menu1 .usuari-menu-widget .mega-menu-segment button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.35rem 0.5rem;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font-size: 0.85em;
  cursor: pointer;
}
#content .menu1 .usuari-menu-widget .mega-menu-segment button i {
  padding: 0;
}
#content .menu1 .usuari-menu-widget .mega-menu-segment button.actiu {
  background-color: var(--color-editable);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  font-weight: 600;
}
#content .menu1 .usuari-menu-widget .mega-menu-estat {
  grid-column: 1/-1;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}
#content .menu1 .usuari-menu-widget .mega-menu-estat .mega-menu-ubicacio {
  margin-top: 0.6rem;
}
#content .menu1 .usuari-menu-widget .mega-menu-estat + section {
  border-left: 0;
  border-top: 0;
}
#content .menu1 .usuari-menu-widget .mega-menu-estat-botons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.75rem;
}
#content .menu1 .usuari-menu-widget .mega-menu-estat-botons > i {
  width: 1.25em;
  color: var(--color-correcte);
  text-align: center;
}
#content .menu1 .usuari-menu-widget .mega-menu-estat-botons .mega-menu-estat-altre {
  margin-left: auto;
  cursor: pointer;
}
#content .menu1 .usuari-menu-widget .mega-menu-estat-botons button {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 1em;
  background: transparent;
  color: inherit;
  font-size: 0.85em;
  cursor: pointer;
}
#content .menu1 .usuari-menu-widget .mega-menu-estat-botons button:hover {
  background-color: var(--color-hover);
}
#content .menu1 .usuari-menu-widget .mega-menu-estat-botons button.actiu {
  border-color: var(--color-correcte);
  background-color: var(--color-editable);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  font-weight: 600;
  cursor: default;
}
#content .menu1 .usuari-menu-widget .mega-menu-estat-botons button[data-ubicacio-auto] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}
#content .menu1 .usuari-menu-widget .mega-menu-estat-botons button[data-ubicacio-auto] i {
  padding: 0;
}
#content .menu1 .usuari-menu-widget .mega-menu-interruptor {
  position: relative;
  width: 2.2em;
  height: 1.2em;
  margin-left: auto;
  padding: 0;
  border-radius: 1em;
  background-color: var(--color-border);
  transition: background-color 0.2s;
}
#content .menu1 .usuari-menu-widget .mega-menu-interruptor::after {
  content: "";
  position: absolute;
  top: 0.15em;
  left: 0.15em;
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  background-color: white;
  transition: left 0.2s;
}
#content .menu1 .usuari-menu-widget .mega-menu-debug.actiu .fa-bug {
  color: var(--color-perill);
}
#content .menu1 .usuari-menu-widget .mega-menu-debug.actiu .mega-menu-interruptor {
  background-color: var(--color-correcte);
}
#content .menu1 .usuari-menu-widget .mega-menu-debug.actiu .mega-menu-interruptor::after {
  left: 1.15em;
}
#content .menu1 .usuari-menu-widget footer {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.25rem;
  border-top: 1px solid var(--color-border);
  background-color: var(--color-hover);
  color: var(--color-text-2);
  font-size: 0.9em;
}
html.dark #content .menu1 .usuari-menu-widget footer {
  background-color: var(--color-fons-2);
}
#content .menu1 .usuari-menu-widget footer button {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background-color: var(--color-editable);
  color: var(--color-text);
  cursor: pointer;
}
#content .menu1 .usuari-menu-widget footer button:hover {
  border-color: var(--color-perill);
  color: var(--color-perill);
}
#content .menu1 .meta-cerca {
  flex: 1;
  display: flex;
  flex-flow: column;
  align-items: center;
  z-index: 10;
}
#content .menu1 .meta-cerca .cerca {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 0.5em;
  background-color: hsla(0, 0%, 100%, 0.12);
  font-size: 1.2rem;
  border-radius: 6px;
  transition: background-color 0.2s;
}
#content .menu1 .meta-cerca .cerca:focus-within {
  background-color: hsla(0, 0%, 100%, 0.22);
  box-shadow: 0 0 2px 1px var(--color1);
}
#content .menu1 .meta-cerca .cerca *, #content .menu1 .meta-cerca .cerca input::placeholder {
  color: hsla(0, 0%, 100%, 0.6);
}
#content .menu1 .meta-cerca .cerca input {
  width: 100%;
  flex: 1;
  background-color: transparent;
  caret-color: white;
}
#content .menu1 .meta-cerca .cerca input:focus {
  outline: none;
  border: 0;
  box-shadow: none;
}
#content .menu1 .meta-cerca .cerca .meta-cerca-clear {
  cursor: pointer;
  opacity: 0.7;
  flex-shrink: 0;
}
#content .menu1 .meta-cerca .cerca .meta-cerca-clear:hover {
  opacity: 1;
}
#content .menu1 .meta-cerca .cerca .meta-cerca-ia {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin-left: 0.4em;
  box-sizing: border-box;
  height: calc(1.2rem * 1.4);
  padding: 0 0.45em;
  border: 1px solid hsla(0, 0%, 100%, 0.28);
  border-radius: 4px;
  background-color: hsla(0, 0%, 100%, 0.16);
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
#content .menu1 .meta-cerca .cerca .meta-cerca-ia, #content .menu1 .meta-cerca .cerca .meta-cerca-ia *, #content .menu1 .meta-cerca .cerca .meta-cerca-ia i {
  color: #fff;
}
#content .menu1 .meta-cerca .cerca .meta-cerca-ia i {
  font-size: 0.95em;
  transform-origin: 50% 50%;
}
#content .menu1 .meta-cerca .cerca .meta-cerca-ia:hover, #content .menu1 .meta-cerca .cerca .meta-cerca-ia:focus-visible {
  background-color: hsla(0, 0%, 100%, 0.28);
  border-color: hsla(0, 0%, 100%, 0.5);
  outline: none;
}
#content .menu1 .meta-cerca .cerca .meta-cerca-ia:hover i, #content .menu1 .meta-cerca .cerca .meta-cerca-ia:focus-visible i {
  animation: metaCercaIaEspurna 1.6s ease-in-out infinite;
}
@keyframes metaCercaIaEspurna {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  30% {
    transform: scale(1.18) rotate(-10deg);
    opacity: 0.75;
  }
  60% {
    transform: scale(0.94) rotate(8deg);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  #content .menu1 .meta-cerca .cerca .meta-cerca-ia:hover i {
    animation: none;
  }
}
#content .menu1 .meta-cerca ul, #content .menu1 .meta-cerca li {
  color: var(--color-text);
  text-transform: none;
}
#content .menu1 .meta-cerca .results {
  background-color: var(--color-fons);
  position: absolute;
  top: 4rem;
  left: 0;
  right: 0;
  padding: 0;
  z-index: 10;
  font-size: 1.1rem;
  border-top: 2px solid var(--color3, var(--color-border));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border-radius: 0 0 8px 8px;
}
#content .menu1 .meta-cerca .results > ul {
  max-width: 100%;
  max-height: 95vh;
  max-height: 95dvh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
  gap: 0.625rem;
  padding: 0.75rem;
}
#content .menu1 .meta-cerca .results > ul ul li {
  padding: 0.35em 0.5em;
  cursor: pointer;
  transition: background-color 0.15s;
  font-size: 1rem;
}
#content .menu1 .meta-cerca .results > ul > li {
  padding: 0.75rem 1rem;
  background-color: var(--color-clar-1);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
html.dark #content .menu1 .meta-cerca .results > ul > li {
  background-color: var(--color-fons-2);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
#content .menu1 .meta-cerca .results > ul > li.meta-cerca-triada {
  grid-column: 1/-1;
}
#content .menu1 .meta-cerca .results > ul > li.meta-cerca-sense-resultats {
  background-color: var(--color-fons-2);
  box-shadow: none;
}
html.dark #content .menu1 .meta-cerca .results > ul > li.meta-cerca-sense-resultats {
  background-color: var(--color-fons-pagina);
  box-shadow: none;
}
#content .menu1 .meta-cerca .results > ul > li.meta-cerca-buides {
  grid-column: 1/-1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em 0.6em;
  padding: 0.25rem;
  background-color: transparent;
  box-shadow: none;
  font-size: 0.85rem;
}
html.dark #content .menu1 .meta-cerca .results > ul > li.meta-cerca-buides {
  background-color: transparent;
  box-shadow: none;
}
#content .menu1 .meta-cerca .results > ul > li.meta-cerca-buides[hidden] {
  display: none;
}
#content .menu1 .meta-cerca .results > ul > li.meta-cerca-buides span.meta-cerca-buides-titol {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-2, var(--color-text));
  cursor: default;
}
#content .menu1 .meta-cerca .results > ul > li.meta-cerca-buides span.meta-cerca-buides-titol:hover {
  opacity: 1;
}
#content .menu1 .meta-cerca .results > ul > li.meta-cerca-buides span.meta-cerca-xips {
  display: contents;
}
#content .menu1 .meta-cerca .results > ul > li.meta-cerca-buides .meta-cerca-xip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.15em 0.6em;
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
  border-radius: 99px;
  background-color: var(--color-fons-2);
  color: var(--color-text-2, var(--color-text));
  font-size: inherit;
  cursor: pointer;
}
#content .menu1 .meta-cerca .results > ul > li.meta-cerca-buides .meta-cerca-xip:hover, #content .menu1 .meta-cerca .results > ul > li.meta-cerca-buides .meta-cerca-xip:focus-visible {
  border-color: var(--color1, var(--color-text-2));
  color: var(--color-text);
}
html.dark #content .menu1 .meta-cerca .results > ul > li.meta-cerca-buides .meta-cerca-xip {
  background-color: var(--color-fons-pagina);
}
#content .menu1 .meta-cerca .results > ul > li.meta-cerca-ajuda {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0 0.25rem;
  background-color: transparent;
  box-shadow: none;
  font-size: 0.9rem;
  color: var(--color-text-2, var(--color-text));
}
html.dark #content .menu1 .meta-cerca .results > ul > li.meta-cerca-ajuda {
  background-color: transparent;
  box-shadow: none;
}
#content .menu1 .meta-cerca .results > ul > li.meta-cerca-ajuda span {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: inherit;
  cursor: default;
}
#content .menu1 .meta-cerca .results > ul > li.meta-cerca-ajuda span.meta-cerca-curt {
  font-weight: 600;
  color: var(--color-text);
}
#content .menu1 .meta-cerca .results > ul > li ul li.meta-cerca-buit {
  opacity: 0.6;
  font-style: italic;
  cursor: default;
}
#content .menu1 .meta-cerca .results > ul > li.menuPrincipal {
  grid-column: 1/-1;
}
#content .menu1 .meta-cerca .results > ul > li.menuPrincipal > ul {
  display: flex;
  flex-flow: row wrap;
}
#content .menu1 .meta-cerca .results > ul > li.menuPrincipal > ul > li {
  padding: 0.15em 0.5em;
}
#content .menu1 .meta-cerca .results > ul > li span {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--apl-primary-deep);
  margin-bottom: 0.5rem;
  padding-bottom: 0.4rem;
  cursor: pointer;
}
#content .menu1 .meta-cerca .results > ul > li span:hover {
  opacity: 0.85;
}
#content .menu1 .meta-cerca .results > ul > li span:hover .cerca-veure-tots {
  opacity: 1;
}
#content .menu1 .meta-cerca .results > ul > li span span.cerca-count {
  background-color: var(--color1, var(--color-text-2));
  color: var(--color-text-invertit);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.1em 0.45em;
  border-radius: 99px;
  min-width: 1.4em;
  text-align: center;
  letter-spacing: 0;
  text-transform: none;
}
#content .menu1 .meta-cerca .results > ul > li span kbd.cerca-prefix {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.05em 0.4em;
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
  border-radius: 4px;
  background-color: var(--color-fons);
  color: var(--color-text);
  cursor: pointer;
}
#content .menu1 .meta-cerca .results > ul > li span kbd.cerca-prefix:hover {
  border-color: var(--color1, var(--color-text-2));
}
#content .menu1 .meta-cerca .results > ul > li span .cerca-veure-tots {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.5;
  display: flex;
  align-items: center;
  gap: 0.3em;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
}
#content .menu1 .fas, #content .menu1 .fa-solid, #content .menu1 .fa-light {
  padding: 0.25rem;
}
#content .menu1 #textACercar {
  line-height: 2em;
}
#content .menu1 #textACercar::-webkit-search-cancel-button {
  display: none;
}
#content .menu1 img {
  max-height: 2.5em;
}
#content .menu1 > * {
  padding: 0 0.5rem;
}
#content .menu1 *[onclick]:hover, #content .menu1 a:hover {
  color: var(--color1);
}
#content > .menu {
  text-align: left;
  grid-area: menu;
  color: var(--color-text);
  background-color: var(--color-editable);
  border-bottom: 1px solid var(--color-border);
  font-weight: 500;
  padding: 0 0.8rem;
}
#content > .menu li.panell i.fa-duotone {
  width: 1.3em;
}
#content > .menu.hidden {
  display: none;
  opacity: 0;
  transition: all 0.3s linear;
}
#content > .menu.hidden.is-visible {
  display: block;
}
#content > .menu.hidden.is-open {
  opacity: 1;
}
#content > .menu *:not(.svg-inline--fa) {
  border-radius: 0;
  padding: 0;
  margin: 0;
}
#content > .menu img.logo {
  max-height: 2.5em;
}
#content > .menu ul.menu {
  font-size: 1.1rem;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
}
#content > .menu ul.menu ul {
  position: absolute;
  display: none;
  opacity: 0;
  max-height: 0;
  list-style: none;
  background-color: var(--color-editable);
  z-index: 1000;
  white-space: nowrap;
  border: 1px solid var(--color-border);
  transition: all 0.3s ease-in-out, display 0.3s ease allow-discrete;
}
@starting-style {
  #content > .menu ul.menu ul {
    opacity: 1;
  }
}
#content > .menu ul.menu ul a {
  justify-content: space-between;
}
#content > .menu ul.menu > li i, #content > .menu ul.menu > li .svg-inline--fa {
  margin-right: 0.5em;
}
#content > .menu ul.menu > li {
  position: relative;
}
#content > .menu ul.menu > li:hover > ul, #content > .menu ul.menu > li.active > ul {
  opacity: 1;
  max-height: 80vh;
  overflow-y: auto;
  display: block;
}
@starting-style {
  #content > .menu ul.menu > li:hover > ul, #content > .menu ul.menu > li.active > ul {
    opacity: 0;
  }
}
#content > .menu ul.menu a {
  display: flex;
  align-items: center;
  padding: 1rem;
}
#content > .menu ul.menu a > div {
  margin-left: 1rem;
  font-size: 0.6em;
}
#content h1, #content .titolApartat, #content .h1 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
  position: relative;
}
#content h1 > span, #content h1 > div, #content h1 > form, #content .titolApartat > span, #content .titolApartat > div, #content .titolApartat > form, #content .h1 > span, #content .h1 > div, #content .h1 > form {
  flex: 1;
}
#content h1 select, #content .titolApartat select, #content .h1 select {
  background: inherit;
  color: inherit;
  font-weight: inherit;
  margin-left: -7px;
}
#content h1 select:focus, #content .titolApartat select:focus, #content .h1 select:focus {
  outline: none;
}
#content h1 .dragzone, #content .titolApartat .dragzone, #content .h1 .dragzone {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#content h1 > .indicador-widget-menu, #content .titolApartat > .indicador-widget-menu, #content .h1 > .indicador-widget-menu {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  outline: none;
}
#content h1 > .indicador-widget-menu > i, #content .titolApartat > .indicador-widget-menu > i, #content .h1 > .indicador-widget-menu > i {
  color: var(--color-text-2);
}
#content h1 > .indicador-widget-menu:hover > i, #content h1 > .indicador-widget-menu:focus-within > i, #content .titolApartat > .indicador-widget-menu:hover > i, #content .titolApartat > .indicador-widget-menu:focus-within > i, #content .h1 > .indicador-widget-menu:hover > i, #content .h1 > .indicador-widget-menu:focus-within > i {
  color: var(--color1);
}
#content h1 > .indicador-widget-menu:hover .indicador-widget-botons, #content h1 > .indicador-widget-menu:focus-within .indicador-widget-botons, #content .titolApartat > .indicador-widget-menu:hover .indicador-widget-botons, #content .titolApartat > .indicador-widget-menu:focus-within .indicador-widget-botons, #content .h1 > .indicador-widget-menu:hover .indicador-widget-botons, #content .h1 > .indicador-widget-menu:focus-within .indicador-widget-botons {
  display: inline-flex;
}
#content h1 > .indicador-widget-menu .far:hover, #content h1 > .indicador-widget-menu .fa-solid:hover, #content h1 > .indicador-widget-menu .card-grafic-accio:hover, #content .titolApartat > .indicador-widget-menu .far:hover, #content .titolApartat > .indicador-widget-menu .fa-solid:hover, #content .titolApartat > .indicador-widget-menu .card-grafic-accio:hover, #content .h1 > .indicador-widget-menu .far:hover, #content .h1 > .indicador-widget-menu .fa-solid:hover, #content .h1 > .indicador-widget-menu .card-grafic-accio:hover {
  color: var(--color1);
}
#content h1 .indicador-widget-botons, #content .titolApartat .indicador-widget-botons, #content .h1 .indicador-widget-botons {
  display: none;
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  padding: 0.1rem 0.3rem 0.1rem 0.6rem;
  background-color: var(--color-editable);
  box-shadow: -0.6rem 0 0.6rem var(--color-editable);
}
#content h1 .indicador-widget-titol, #content .titolApartat .indicador-widget-titol, #content .h1 .indicador-widget-titol {
  min-width: 0;
}
#content h1 .indicador-widget-titol select, #content h1 .indicador-widget-titol .ts-wrapper, #content .titolApartat .indicador-widget-titol select, #content .titolApartat .indicador-widget-titol .ts-wrapper, #content .h1 .indicador-widget-titol select, #content .h1 .indicador-widget-titol .ts-wrapper {
  max-width: 100%;
  text-overflow: ellipsis;
  border: 0;
  font: inherit;
  cursor: pointer;
}
#content h1 .indicador-widget-titol .ts-wrapper, #content .titolApartat .indicador-widget-titol .ts-wrapper, #content .h1 .indicador-widget-titol .ts-wrapper {
  width: auto;
  min-width: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}
#content h1 .indicador-widget-titol .ts-wrapper .clear, #content .titolApartat .indicador-widget-titol .ts-wrapper .clear, #content .h1 .indicador-widget-titol .ts-wrapper .clear {
  display: none;
}
#content h1 .indicador-widget-titol .ts-wrapper .ts-control, #content .titolApartat .indicador-widget-titol .ts-wrapper .ts-control, #content .h1 .indicador-widget-titol .ts-wrapper .ts-control {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  box-shadow: none;
}
#content h1 .indicador-widget-accions, #content .titolApartat .indicador-widget-accions, #content .h1 .indicador-widget-accions {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
#content h1 .indicador-widget-accions .card-grafic-accio, #content .titolApartat .indicador-widget-accions .card-grafic-accio, #content .h1 .indicador-widget-accions .card-grafic-accio {
  padding: 0 0.2rem;
  color: inherit;
  background: none;
}
#content h1 > .btn-tanca, #content .titolApartat > .btn-tanca, #content .h1 > .btn-tanca {
  flex: 0;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
#content h1 > .btn-tanca.collapse, #content .titolApartat > .btn-tanca.collapse, #content .h1 > .btn-tanca.collapse {
  height: 0;
  z-index: 10;
  background-color: var(--color-editable);
  position: absolute;
  top: 0;
  left: 0;
  right: 1rem;
}
#content h1:hover > .btn-tanca, #content .titolApartat:hover > .btn-tanca, #content .h1:hover > .btn-tanca {
  visibility: visible;
  background-color: var(--color-editable);
  opacity: 1;
}
#content h1:hover > .btn-tanca .far:hover, #content h1:hover > .btn-tanca .fa-light:hover, #content h1:hover > .btn-tanca .fa:hover, #content h1:hover > .btn-tanca [data-icon]:hover, #content .titolApartat:hover > .btn-tanca .far:hover, #content .titolApartat:hover > .btn-tanca .fa-light:hover, #content .titolApartat:hover > .btn-tanca .fa:hover, #content .titolApartat:hover > .btn-tanca [data-icon]:hover, #content .h1:hover > .btn-tanca .far:hover, #content .h1:hover > .btn-tanca .fa-light:hover, #content .h1:hover > .btn-tanca .fa:hover, #content .h1:hover > .btn-tanca [data-icon]:hover {
  color: var(--color1);
}
#content #bottom.xat {
  position: absolute;
  bottom: 2rem;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20em, max-content));
  grid-gap: 0 1rem;
}
#content #bottom.xat .apartat.minimized iframe {
  display: none;
}
#content .bottom {
  text-transform: uppercase;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0.5rem 1.1rem;
  color: var(--color-clar-1);
  background-color: var(--color3);
  display: flex;
  align-items: center;
}
#content .bottom.bottom1 {
  grid-area: foot1;
}
#content .bottom.bottom2 {
  grid-area: foot2;
}
#content .bottom.bottom3 {
  grid-area: foot3;
}
@media (max-width: 30rem) {
  #content .bottom.bottom1, #content .bottom.bottom2, #content .bottom.bottom3 {
    display: none;
  }
}
#content .bottom .data {
  width: 100%;
  text-transform: none;
  text-align: center;
}
#content .bottom input, #content .bottom select {
  background-color: rgba(255, 255, 255, 0);
  color: inherit;
}
@media (max-width: 30rem) {
  #content .apartat {
    min-width: 100%;
    width: 100%;
  }
}
#content .widget-3 {
  padding: 0.5rem;
  display: grid;
  grid-auto-rows: min-content;
  grid-template-columns: min-content minmax(10em, 1fr) min-content;
  grid-gap: 0 0.5rem;
}
#content .widget-3 > * {
  align-self: center;
  display: flex;
  flex-flow: column;
}
#content .widget-3 > * > *:last-child:not(:first-child) {
  font-size: 0.8em;
}

.menu-ordre-widget {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  min-width: 12em;
  padding: 0.25rem;
  background-color: var(--color-fons);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
.menu-ordre-widget button {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.4em 0.6em;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.menu-ordre-widget button i {
  width: 1.1em;
  text-align: center;
}
.menu-ordre-widget button:hover:not([disabled]), .menu-ordre-widget button:focus-visible {
  background-color: var(--color-fons-2);
  outline: none;
}
.menu-ordre-widget button[disabled] {
  opacity: 0.4;
  cursor: default;
}

.full {
  width: 100%;
}
.full[class*=filtre-] > .filtre-on {
  width: 100%;
  padding-bottom: 0.5rem;
}

span.sr-only {
  display: none;
}

#dades {
  position: relative;
  grid-row: 1;
  grid-column: 2;
  height: 100%;
  padding: 0.8rem;
  overflow-x: hidden;
}
#dades, #dades .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(38em, 40%), auto));
  grid-auto-rows: minmax(8em, auto);
  column-gap: 0.4rem;
  row-gap: 0.25rem;
}
#dades.grid-2a, #dades .grid.grid-2a {
  flex: 1;
  grid-template-columns: repeat(auto-fit, minmax(max(26em, 40%), auto));
}
#dades.grid-1, #dades .grid.grid-1 {
  grid-template-rows: min-content;
}
#dades.grid-1 > *, #dades .grid.grid-1 > * {
  grid-column: 1/-1;
}
#dades.grid-1a, #dades .grid.grid-1a {
  grid-template-rows: unset;
  grid-auto-rows: min-content;
}
#dades.grid-1a > *, #dades .grid.grid-1a > * {
  grid-column: 1/-1;
  max-height: 90vh;
}
#dades.grid-panell, #dades .grid.grid-panell {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 40em), 1fr));
  grid-auto-rows: min-content;
  align-items: start;
}
#dades.grid-panell > form, #dades .grid.grid-panell > form {
  display: contents;
}
#dades.grid-panell > .apartat.ample, #dades.grid-panell > form > .apartat.ample, #dades .grid.grid-panell > .apartat.ample, #dades .grid.grid-panell > form > .apartat.ample {
  grid-column: 1/-1;
}
#dades .apartat, #dades .grid .apartat {
  display: grid;
  grid-template-rows: min-content minmax(0, auto) minmax(0, min-content);
}
#dades .apartat.maximized .titolApartat::before, #dades .grid .apartat.maximized .titolApartat::before {
  font: var(--fa-font-regular);
  content: "\f31e";
  padding-right: 0.5em;
}
@media (max-width: 30rem) {
  #dades .apartat, #dades .grid .apartat {
    grid-column: 1/-1;
    grid-row: auto;
  }
}
#dades .apartat > div:not(:first-child), #dades .apartat > form:not(:first-child), #dades .grid .apartat > div:not(:first-child), #dades .grid .apartat > form:not(:first-child) {
  overflow: auto;
}
@media (max-width: 30rem) {
  #dades .apartat > div:not(:first-child), #dades .apartat > form:not(:first-child), #dades .grid .apartat > div:not(:first-child), #dades .grid .apartat > form:not(:first-child) {
    max-height: 90vh;
    max-height: 90dvh;
  }
}
#dades .permisos, #dades .grid .permisos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16em, auto));
}
#dades .permisos > *, #dades .grid .permisos > * {
  min-height: 2em;
  overflow-x: hidden;
  text-overflow: ellipsis;
  margin-right: 1em;
}
#dades .permisos > * label, #dades .grid .permisos > * label {
  margin: 0;
}
#dades .peuApartat, #dades .titolApartat {
  min-height: 1.5rem;
  user-select: none;
}
#dades .peuApartat {
  display: flex;
  align-items: flex-end;
  padding-top: 0.5em;
  margin-bottom: -0.5em;
}
#dades .peuApartat .dada {
  min-height: 0;
}
#dades .peuApartat .dada > * {
  margin-bottom: 0;
}
#dades .hidden-distraction:not(.always-visible) {
  display: none !important;
}
#dades .half {
  width: 50%;
}
#dades .flex-r {
  flex: 1 0;
  display: flex;
  flex-flow: row wrap;
}
#dades .flex-r > div, #dades .flex-r form {
  flex: 1;
}

@keyframes heSortitPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.35);
    opacity: 0.35;
  }
}
#dades.heSortit {
  display: flex;
  flex-flow: column;
  padding: 0;
  min-height: 100%;
  background: var(--color-fons-pagina);
  color: var(--color-text);
  overflow: auto;
}

.heSortit-capcalera {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 28px;
}

.heSortit-estat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--apl-primary-tint);
  border: 1px solid var(--apl-primary-soft);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--apl-primary-deep);
}
.heSortit-estat::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--apl-primary);
}

.heSortit-cos {
  flex: 1;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px 80px;
  gap: 0;
}

.heSortit-icona {
  position: relative;
  width: 132px;
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
}
.heSortit-icona::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--apl-primary-soft);
  animation: heSortitPulse 2.6s ease-in-out infinite;
}
.heSortit-icona i {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--color-fons);
  border: 1px solid var(--color-border);
  box-shadow: 0 12px 34px var(--color-hover);
  font-size: 40px;
  color: var(--apl-primary);
}

.heSortit-titol {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--apl-primary-deep);
}

.heSortit-subtitol {
  margin: 0;
  font-size: 16px;
  color: var(--color-text-2);
}

.heSortit-temps {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 8px;
  margin: 44px 0 48px;
}

.heSortit-temps-titol {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-2);
}

.heSortit-temps-valor {
  font-size: 46px;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.heSortit-boto {
  appearance: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 21px;
  font-weight: 600;
  color: var(--color-text-invertit);
  background: var(--apl-primary);
  padding: 20px 56px;
  border-radius: 16px;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--apl-primary) 32%, transparent);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.heSortit-boto:hover {
  background: var(--apl-primary-deep);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px color-mix(in srgb, var(--apl-primary) 40%, transparent);
}
.heSortit-boto:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--apl-primary) 30%, transparent);
}

.heSortit-altres {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

.heSortit-boto-alt {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-2);
  background: transparent;
  border: 1px solid var(--color-border);
  padding: 9px 18px;
  border-radius: 999px;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.heSortit-boto-alt:hover {
  background: var(--color-hover);
  border-color: var(--apl-primary);
  color: var(--color-text);
}

@media (max-width: 600px) {
  .heSortit-icona {
    width: 104px;
    height: 104px;
    margin-bottom: 28px;
  }
  .heSortit-icona i {
    width: 74px;
    height: 74px;
    font-size: 32px;
  }
  .heSortit-temps-valor {
    font-size: 38px;
  }
  .heSortit-boto {
    padding: 18px 36px;
    font-size: 19px;
  }
}
.flex-c {
  flex: 1 0;
  min-width: 0;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  row-gap: 0.3rem;
}
.flex-c > textarea:not(.autosize) {
  min-height: 1em;
  flex: 1;
}
.flex-c > .edn-mount {
  flex: 1;
  min-height: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.flex-c > .edn-mount .edn-wrapper {
  flex: 1;
  min-height: 0;
}
.flex-c > .edn-mount .edn-host {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.flex-c > .edn-mount .edn-doc {
  min-width: 0;
  resize: none;
}

.menuEsq {
  z-index: 5;
  position: relative;
  grid-column: 1;
  grid-row: 1/-1;
  height: 100%;
  width: 15vw;
  width: 15dvw;
  color: var(--color-text);
  text-transform: uppercase;
}
.menuEsq .taulaMenuEsq {
  display: flex;
  flex-flow: column;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: var(--color-fons-2);
  padding-bottom: 3rem;
}
.menuEsq .taulaMenuEsq tr td, .menuEsq .taulaMenuEsq tr th {
  width: 15vw;
  width: 15dvw;
}
.menuEsq .taulaMenuEsq td, .menuEsq .taulaMenuEsq th {
  padding: 0.15rem;
}
.menuEsq .taulaMenuEsq tr.logo {
  position: absolute;
  bottom: 0;
  background-color: var(--color-fons-2);
  padding: 0.5em;
  margin: 0.25em;
}
.menuEsq .taulaMenuEsq tr.logo td {
  border: 0;
}
.menuEsq .taulaMenuEsq tr.logo img {
  width: 100%;
  object-fit: contain;
}
.menuEsq .taulaMenuEsq tr:not(.logo):first-child td:first-child {
  display: block;
}
.menuEsq .taulaMenuEsq tr:not(.logo):first-child td:first-child * {
  font-weight: bolder;
}
.menuEsq .taulaMenuEsq tr:not(.logo) td {
  border: 0;
  white-space: nowrap;
}
.menuEsq .taulaMenuEsq tr:not(.logo) td a {
  display: block;
  padding: 0.5em;
  margin: 0.25em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menuEsq .taulaMenuEsq tr:not(.logo) td a:hover {
  border-radius: 3px;
  color: var(--color-text-invertit);
  background-color: var(--color1);
  box-shadow: none;
}
.menuEsq .taulaMenuEsq tr:not(.logo) td.menuSel {
  display: block;
}
.menuEsq .taulaMenuEsq tr:not(.logo) td.menuSel a {
  color: var(--color-text-invertit);
  background-color: var(--color3);
  border-radius: 3px;
}
@media (max-width: 30rem) {
  .menuEsq:not([data-ambicones]) {
    position: relative;
    width: 3.7em;
  }
  .menuEsq:not([data-ambicones]) > :not(table) {
    max-width: 3.7em;
    overflow: hidden;
  }
  .menuEsq:not([data-ambicones]) .taulaMenuEsq {
    top: 0;
    left: 0;
    width: 3.7em;
    overflow-x: hidden;
  }
  .menuEsq:not([data-ambicones]) .taulaMenuEsq tr.logo {
    padding: 0;
    margin: 0;
  }
  .menuEsq:not([data-ambicones]) .taulaMenuEsq tr.logo td {
    display: initial;
    text-align: center;
  }
  .menuEsq:not([data-ambicones]) .taulaMenuEsq tr.logo td a {
    transform: none;
    writing-mode: initial;
  }
  .menuEsq:not([data-ambicones]) .taulaMenuEsq tr.logo td img {
    width: inherit;
    max-width: calc(100% - 0.5em);
    max-height: 6rem;
  }
  .menuEsq:not([data-ambicones]) .taulaMenuEsq td {
    display: none;
  }
  .menuEsq:not([data-ambicones]) .taulaMenuEsq td a {
    writing-mode: vertical-lr;
    transform: rotate(-180deg);
    max-height: 50vh;
    max-height: 50dvh;
  }
  .menuEsq:not([data-ambicones]) .taulaMenuEsq td a .far {
    writing-mode: initial;
    transform: rotate(180deg);
  }
  .menuEsq:not([data-ambicones]) .taulaMenuEsq.expanded, .menuEsq:not([data-ambicones]) .taulaMenuEsq:hover, .menuEsq:not([data-ambicones]) .taulaMenuEsq:focus-within {
    position: absolute;
    top: 0;
    left: 0;
    width: 15rem;
  }
  .menuEsq:not([data-ambicones]) .taulaMenuEsq.expanded tr.logo td, .menuEsq:not([data-ambicones]) .taulaMenuEsq:hover tr.logo td, .menuEsq:not([data-ambicones]) .taulaMenuEsq:focus-within tr.logo td {
    display: none;
  }
  .menuEsq:not([data-ambicones]) .taulaMenuEsq.expanded td, .menuEsq:not([data-ambicones]) .taulaMenuEsq:hover td, .menuEsq:not([data-ambicones]) .taulaMenuEsq:focus-within td {
    display: block;
  }
  .menuEsq:not([data-ambicones]) .taulaMenuEsq.expanded td a, .menuEsq:not([data-ambicones]) .taulaMenuEsq:hover td a, .menuEsq:not([data-ambicones]) .taulaMenuEsq:focus-within td a {
    width: 14rem;
    writing-mode: initial;
    transform: initial;
    padding: 0.5em;
  }
  .menuEsq:not([data-ambicones]) .taulaMenuEsq.expanded td a .far, .menuEsq:not([data-ambicones]) .taulaMenuEsq:hover td a .far, .menuEsq:not([data-ambicones]) .taulaMenuEsq:focus-within td a .far {
    writing-mode: initial;
    transform: initial;
  }
  .menuEsq:not([data-ambicones]) .taulaMenuEsq.expanded td a u, .menuEsq:not([data-ambicones]) .taulaMenuEsq:hover td a u, .menuEsq:not([data-ambicones]) .taulaMenuEsq:focus-within td a u {
    font-weight: bolder;
  }
}
@media (max-width: 30rem) and (max-width: 30rem) {
  .menuEsq:not([data-ambicones]) {
    width: 1.5rem;
  }
  .menuEsq:not([data-ambicones]) .taulaMenuEsq {
    width: 1.5rem;
  }
  .menuEsq:not([data-ambicones]) .taulaMenuEsq tr td a {
    margin: 0;
    padding: 0.5em 0;
  }
}
@media (min-width: 31rem) {
  .menuEsq.stacked:not([data-ambicones]) .taulaMenuEsq img {
    max-height: 6rem;
  }
  .menuEsq.stacked:not([data-ambicones]) .taulaMenuEsq tr:first-child {
    background-color: var(--color-fons);
    position: absolute;
    top: 0;
  }
  .menuEsq.stacked:not([data-ambicones]) .taulaMenuEsq tbody {
    margin-top: 4em;
  }
  .menuEsq.stacked:not([data-ambicones]) .taulaMenuEsq td > a {
    width: calc(100% - 1.5em);
  }
  .menuEsq.stacked:not([data-ambicones]) .taulaMenuEsq.logo tr:nth-last-child(2) td a {
    margin-bottom: 6rem;
  }
  .menuEsq:not(.stacked):not([data-ambicones]) {
    position: relative;
    width: 3.7em;
  }
  .menuEsq:not(.stacked):not([data-ambicones]) > :not(table) {
    max-width: 3.7em;
    overflow: hidden;
  }
  .menuEsq:not(.stacked):not([data-ambicones]) .taulaMenuEsq {
    top: 0;
    left: 0;
    width: 3.7em;
    overflow-x: hidden;
  }
  .menuEsq:not(.stacked):not([data-ambicones]) .taulaMenuEsq tr.logo {
    padding: 0;
    margin: 0;
  }
  .menuEsq:not(.stacked):not([data-ambicones]) .taulaMenuEsq tr.logo td {
    display: initial;
    text-align: center;
  }
  .menuEsq:not(.stacked):not([data-ambicones]) .taulaMenuEsq tr.logo td a {
    transform: none;
    writing-mode: initial;
  }
  .menuEsq:not(.stacked):not([data-ambicones]) .taulaMenuEsq tr.logo td img {
    width: inherit;
    max-width: calc(100% - 0.5em);
    max-height: 6rem;
  }
  .menuEsq:not(.stacked):not([data-ambicones]) .taulaMenuEsq td {
    display: none;
  }
  .menuEsq:not(.stacked):not([data-ambicones]) .taulaMenuEsq td a {
    writing-mode: vertical-lr;
    transform: rotate(-180deg);
    max-height: 50vh;
    max-height: 50dvh;
  }
  .menuEsq:not(.stacked):not([data-ambicones]) .taulaMenuEsq td a .far {
    writing-mode: initial;
    transform: rotate(180deg);
  }
  .menuEsq:not(.stacked):not([data-ambicones]) .taulaMenuEsq.expanded, .menuEsq:not(.stacked):not([data-ambicones]) .taulaMenuEsq:hover, .menuEsq:not(.stacked):not([data-ambicones]) .taulaMenuEsq:focus-within {
    position: absolute;
    top: 0;
    left: 0;
    width: 15rem;
  }
  .menuEsq:not(.stacked):not([data-ambicones]) .taulaMenuEsq.expanded tr.logo td, .menuEsq:not(.stacked):not([data-ambicones]) .taulaMenuEsq:hover tr.logo td, .menuEsq:not(.stacked):not([data-ambicones]) .taulaMenuEsq:focus-within tr.logo td {
    display: none;
  }
  .menuEsq:not(.stacked):not([data-ambicones]) .taulaMenuEsq.expanded td, .menuEsq:not(.stacked):not([data-ambicones]) .taulaMenuEsq:hover td, .menuEsq:not(.stacked):not([data-ambicones]) .taulaMenuEsq:focus-within td {
    display: block;
  }
  .menuEsq:not(.stacked):not([data-ambicones]) .taulaMenuEsq.expanded td a, .menuEsq:not(.stacked):not([data-ambicones]) .taulaMenuEsq:hover td a, .menuEsq:not(.stacked):not([data-ambicones]) .taulaMenuEsq:focus-within td a {
    width: 14rem;
    writing-mode: initial;
    transform: initial;
    padding: 0.5em;
  }
  .menuEsq:not(.stacked):not([data-ambicones]) .taulaMenuEsq.expanded td a .far, .menuEsq:not(.stacked):not([data-ambicones]) .taulaMenuEsq:hover td a .far, .menuEsq:not(.stacked):not([data-ambicones]) .taulaMenuEsq:focus-within td a .far {
    writing-mode: initial;
    transform: initial;
  }
  .menuEsq:not(.stacked):not([data-ambicones]) .taulaMenuEsq.expanded td a u, .menuEsq:not(.stacked):not([data-ambicones]) .taulaMenuEsq:hover td a u, .menuEsq:not(.stacked):not([data-ambicones]) .taulaMenuEsq:focus-within td a u {
    font-weight: bolder;
  }
}
@media (min-width: 31rem) and (max-width: 30rem) {
  .menuEsq:not(.stacked):not([data-ambicones]) {
    width: 1.5rem;
  }
  .menuEsq:not(.stacked):not([data-ambicones]) .taulaMenuEsq {
    width: 1.5rem;
  }
  .menuEsq:not(.stacked):not([data-ambicones]) .taulaMenuEsq tr td a {
    margin: 0;
    padding: 0.5em 0;
  }
}

/* =========================================================================
   Barra lateral nova (menús migrats amb icones): .menuEsq[data-ambicones]
   Suporta col·lapse a rail d'icones; l'estat es desa a localStorage
   (clau menuEsqCollapsed) i s'aplica amb la classe body.menuEsqCollapsed.
   Veure menuLoading.php per al JS de toggle i restauració.
   ========================================================================= */
.menuEsq[data-ambicones] {
  --menuEsq-w: 15.5rem;
  --menuEsq-w-collapsed: 3.9rem;
  --menuEsq-dur: 200ms;
  --menuEsq-ease: cubic-bezier(.2, .8, .2, 1);
  display: flex;
  flex-flow: column;
  width: var(--menuEsq-w);
  text-transform: none;
  background-color: var(--color-fons-2);
  border-right: 1px solid var(--color-border);
  overflow: hidden;
  padding: 0;
  transition: width var(--menuEsq-dur) var(--menuEsq-ease);
}
.menuEsq[data-ambicones] .menuEsqHead {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  padding: 0.7rem 0.6rem 0.4rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-fons-2);
}
.menuEsq[data-ambicones] .menuEsqItems {
  flex: 1 1 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-flow: column;
  padding: 0 0.6rem 0.7rem;
}
.menuEsq[data-ambicones] .menuEsqSearch {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-fons);
  border: 1px solid var(--color-border);
  border-radius: 0.4rem;
  padding: 0.25rem 0.5rem;
}
.menuEsq[data-ambicones] .menuEsqSearch > i {
  color: var(--color-text-2);
  font-size: 0.85em;
  flex: none;
}
.menuEsq[data-ambicones] .menuEsqSearch input {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
  color: var(--color-text);
  font-size: 0.9rem;
  padding: 0;
}
.menuEsq[data-ambicones] .menuEsqToggle {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--color-text-2);
  cursor: pointer;
}
.menuEsq[data-ambicones] .menuEsqToggle:hover {
  background-color: var(--color-fons-2);
  color: var(--apl-primary-deep);
}
.menuEsq[data-ambicones] .menuEsqToggle i {
  transition: transform var(--menuEsq-dur) var(--menuEsq-ease);
}
.menuEsq[data-ambicones] .grp {
  flex: none;
  font-size: 0.82em;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-2);
  padding: 0.9rem 0.6rem 0.35rem;
  white-space: nowrap;
  overflow: hidden;
}
.menuEsq[data-ambicones] a.menuEsqItem {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.6rem;
  margin: 0.05rem 0;
  border-radius: 0.4rem;
  font-weight: 600;
  color: var(--color-text-2);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}
.menuEsq[data-ambicones] a.menuEsqItem i {
  width: 1.1rem;
  flex: none;
  text-align: center;
  font-size: 0.95em;
  color: var(--color-text-2);
  opacity: 0.75;
}
.menuEsq[data-ambicones] a.menuEsqItem .menuEsqText {
  overflow: hidden;
  text-overflow: ellipsis;
}
.menuEsq[data-ambicones] a.menuEsqItem .ct {
  margin-left: auto;
  font-size: 0.78em;
  font-weight: 800;
  color: var(--color-text-2);
  background-color: var(--color-fons-2);
  padding: 0 0.45rem;
  border-radius: 999px;
}
.menuEsq[data-ambicones] a.menuEsqItem:hover {
  background-color: var(--color-fons-2);
  color: var(--color-text);
  box-shadow: none;
}
.menuEsq[data-ambicones] a.menuEsqItem:hover i {
  opacity: 1;
}
.menuEsq[data-ambicones] a.menuEsqItem.on {
  background-color: var(--apl-primary-tint);
  color: var(--apl-primary-deep);
  font-weight: 700;
}
.menuEsq[data-ambicones] a.menuEsqItem.on i {
  color: var(--apl-primary);
  opacity: 1;
}
.menuEsq[data-ambicones] a.menuEsqItem.on .ct {
  background-color: var(--apl-primary-soft);
  color: var(--apl-primary-deep);
}
.menuEsq[data-ambicones] a.menuEsqItem.on::before {
  content: "";
  position: absolute;
  left: -0.6rem;
  top: 0.45rem;
  bottom: 0.45rem;
  width: 3px;
  border-radius: 3px;
  background-color: var(--apl-primary);
}
.menuEsq[data-ambicones] a.menuEsqItem.desactivat:not(.on) {
  opacity: 0.45;
  cursor: not-allowed;
}
.menuEsq[data-ambicones] a.menuEsqItem.desactivat:not(.on):hover {
  background-color: transparent;
  color: var(--color-text-2);
}
.menuEsq[data-ambicones] a.menuEsqItem.desactivat:not(.on):hover i {
  opacity: 0.75;
}
.menuEsq[data-ambicones] {
  /* bloc de logo/foto al peu del menú (p. ex. foto principal de l'acció) */
}
.menuEsq[data-ambicones] .menuEsqLogo {
  flex: none;
  display: block;
  padding: 0.6rem;
  text-align: center;
  color: var(--color-text-2);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-fons-2);
}
.menuEsq[data-ambicones] .menuEsqLogo img {
  width: 100%;
  object-fit: contain;
  border-radius: 0.4rem;
}

/* ---------- estat col·lapsat: rail d'icones ---------- */
body.menuEsqCollapsed .menuEsq[data-ambicones] {
  width: var(--menuEsq-w-collapsed);
}
body.menuEsqCollapsed .menuEsq[data-ambicones] .menuEsqHead {
  justify-content: center;
  padding-left: 0.45rem;
  padding-right: 0.45rem;
}
body.menuEsqCollapsed .menuEsq[data-ambicones] .menuEsqItems {
  padding-left: 0.45rem;
  padding-right: 0.45rem;
}
body.menuEsqCollapsed .menuEsq[data-ambicones] .menuEsqSearch {
  display: none;
}
body.menuEsqCollapsed .menuEsq[data-ambicones] .menuEsqToggle i {
  transform: rotate(180deg);
}
body.menuEsqCollapsed .menuEsq[data-ambicones] a.menuEsqItem {
  justify-content: center;
  gap: 0;
  padding: 0.55rem 0;
}
body.menuEsqCollapsed .menuEsq[data-ambicones] a.menuEsqItem i {
  width: auto;
  font-size: 1.1em;
}
body.menuEsqCollapsed .menuEsq[data-ambicones] a.menuEsqItem .menuEsqText,
body.menuEsqCollapsed .menuEsq[data-ambicones] a.menuEsqItem .ct {
  display: none;
}
body.menuEsqCollapsed .menuEsq[data-ambicones] a.menuEsqItem.on::before {
  left: -0.45rem;
}
body.menuEsqCollapsed .menuEsq[data-ambicones] .grp {
  height: 1px;
  padding: 0;
  margin: 0.55rem 0.6rem;
  font-size: 0;
  color: transparent;
  background-color: var(--color-border);
}

/* evita el flash d'animació en restaurar l'estat en carregar la pàgina */
body.menuEsqNoAnim .menuEsq[data-ambicones],
body.menuEsqNoAnim .menuEsq[data-ambicones] * {
  transition: none !important;
}

#menuTorna:not(.menuTornaWarpper), .menuTornaWrapper:not(.menuTornaWarpper) {
  grid-row: 2;
  grid-column: 2;
}
#menuTorna, .menuTornaWrapper {
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--color-clar-1);
  background-color: var(--color3);
  overflow: auto;
  padding-left: 0.8rem;
}
#menuTorna *, .menuTornaWrapper * {
  background-color: inherit;
  color: inherit;
}
@media (max-width: 30rem) {
  #menuTorna, .menuTornaWrapper {
    position: fixed;
    bottom: 0;
  }
}
#menuTorna form, .menuTornaWrapper form {
  display: inline-block;
}
#menuTorna div, .menuTornaWrapper div {
  margin: 0.25em;
  padding: 0.5em;
  border-radius: 3px;
  display: flex;
  align-items: center;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
#menuTorna div.menuTornaCopiaReserves, .menuTornaWrapper div.menuTornaCopiaReserves {
  flex-shrink: 0;
  gap: 0.4em;
}
#menuTorna div.menuTornaCopiaReserves > span, .menuTornaWrapper div.menuTornaCopiaReserves > span {
  display: flex;
  align-items: center;
}
#menuTorna div.menuTornaCopiaReserves select, .menuTornaWrapper div.menuTornaCopiaReserves select {
  width: auto;
}
#menuTorna div.menuTornaCopiaReserves input, .menuTornaWrapper div.menuTornaCopiaReserves input {
  border-bottom: 1px solid currentColor;
  width: 6em;
}
#menuTorna div.menuTornaCopiaReserves .ts-wrapper, #menuTorna div.menuTornaCopiaReserves .ts-control, #menuTorna div.menuTornaCopiaReserves .ts-control .item, #menuTorna div.menuTornaCopiaReserves .ts-control .clear-button, .menuTornaWrapper div.menuTornaCopiaReserves .ts-wrapper, .menuTornaWrapper div.menuTornaCopiaReserves .ts-control, .menuTornaWrapper div.menuTornaCopiaReserves .ts-control .item, .menuTornaWrapper div.menuTornaCopiaReserves .ts-control .clear-button {
  min-height: 0;
  padding-block: 0.1em;
}
#menuTorna div select, .menuTornaWrapper div select {
  flex-shrink: 1;
  width: 100%;
  max-width: 14em;
  text-transform: uppercase;
  background-color: transparent;
}
#menuTorna div select option:not([selected]), .menuTornaWrapper div select option:not([selected]) {
  color: var(--color-text);
  background-color: var(--color-editable);
}
#menuTorna div a, #menuTorna div button, .menuTornaWrapper div a, .menuTornaWrapper div button {
  flex-shrink: 1;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
#menuTorna div button, .menuTornaWrapper div button {
  padding: 0;
  background: inherit;
  color: inherit;
  text-transform: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
#menuTorna div:hover, .menuTornaWrapper div:hover {
  background-color: var(--color1);
}
#menuTorna div::before, .menuTornaWrapper div::before {
  margin-right: 0.25em;
  font: var(--fa-font-light);
}
#menuTorna div.menuTornaImprimir::before, .menuTornaWrapper div.menuTornaImprimir::before {
  content: "\f02f";
}
#menuTorna div.menuTornaCheck::before, .menuTornaWrapper div.menuTornaCheck::before {
  content: "\f00c";
}
#menuTorna div#menuTornaCercaMapa::before, .menuTornaWrapper div#menuTornaCercaMapa::before {
  content: "\f279";
}
#menuTorna div.menuTornaTorna::before, .menuTornaWrapper div.menuTornaTorna::before {
  content: "\f00d";
}
#menuTorna div.menuTornaEnrere::before, .menuTornaWrapper div.menuTornaEnrere::before {
  content: "\f060";
}
#menuTorna div.menuTornaModifica::before, .menuTornaWrapper div.menuTornaModifica::before {
  content: "\f044";
}
#menuTorna div.menuTornaDesa::before, .menuTornaWrapper div.menuTornaDesa::before {
  content: "\f0c7";
}
#menuTorna div.menuTornaEnvia::before, .menuTornaWrapper div.menuTornaEnvia::before {
  content: "\f0e0";
}
#menuTorna div.menuTornaArxiva::before, .menuTornaWrapper div.menuTornaArxiva::before {
  content: "\f187";
}
#menuTorna div.menuTornaElimina::before, .menuTornaWrapper div.menuTornaElimina::before {
  content: "\f1f8";
}
#menuTorna div.menuTornaExcel::before, .menuTornaWrapper div.menuTornaExcel::before {
  content: "\f019";
}
#menuTorna div.menuTornaEstadistiques::before, .menuTornaWrapper div.menuTornaEstadistiques::before {
  content: "\f201";
}
#menuTorna div.menuTornaCerca::before, .menuTornaWrapper div.menuTornaCerca::before {
  content: "\f002";
}
#menuTorna div.menuTornaFoto::before, .menuTornaWrapper div.menuTornaFoto::before {
  content: "\f030";
}
#menuTorna div.menuTornaAccions, .menuTornaWrapper div.menuTornaAccions {
  flex-shrink: 0;
}
#menuTorna .menuTornaAccionsBtn, .menuTornaWrapper .menuTornaAccionsBtn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  cursor: pointer;
}
@media (max-width: 30rem) {
  #menuTorna, .menuTornaWrapper {
    grid-column: 1/-1;
    z-index: 5;
    flex-wrap: nowrap;
  }
  #menuTorna div, .menuTornaWrapper div {
    margin: 0;
  }
}

.menuAccionsLlista {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-width: 13em;
  padding: 0.25em 0;
  background-color: var(--color3);
  color: var(--color-clar-1);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  text-transform: none;
}
.menuAccionsLlista button, .menuAccionsLlista a {
  display: flex;
  align-items: center;
  gap: 0.6em;
  width: 100%;
  margin: 0;
  padding: 0.55em 0.9em;
  box-sizing: border-box;
  background: transparent;
  color: inherit;
  border: 0;
  font: inherit;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.menuAccionsLlista button:focus, .menuAccionsLlista a:focus {
  background: transparent;
  box-shadow: none;
}
.menuAccionsLlista i {
  flex: 0 0 1.25em;
  text-align: center;
}

#menuAccionsLlista button:hover, #menuAccionsLlista button:focus-visible, #menuAccionsLlista a:hover, #menuAccionsLlista a:focus-visible {
  background-color: var(--color1);
  color: var(--color-clar-1);
  outline: none;
}

#menuEnviarLlista button:hover, #menuEnviarLlista button:focus-visible, #menuEnviarLlista a:hover, #menuEnviarLlista a:focus-visible {
  background-color: var(--color1);
  color: var(--color-clar-1);
  outline: none;
}

.menuAccionsLlista .menuAccionsNota {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 0.9em;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  opacity: 0.85;
}

.menuAccionsLlista .menuAccionsPerill {
  border-top: 1px solid var(--color-border);
}
.menuAccionsLlista .menuAccionsPerill i {
  color: var(--color-perill);
}

.menuAccionsLlista .menuAccionsDuplica {
  display: flex;
  align-items: center;
}
.menuAccionsLlista .menuAccionsDuplica[hidden] {
  display: none;
}
.menuAccionsLlista .menuAccionsDuplica button {
  flex: 1 1 auto;
}
.menuAccionsLlista .menuAccionsDuplica select {
  flex: 0 0 auto;
  margin: 0 0.9em 0 0;
}

.tascaPrograma {
  min-width: min(26em, 92vw);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background-color: var(--color-fons-pagina);
  color: var(--color-text);
}
.tascaPrograma::backdrop {
  background: rgba(0, 0, 0, 0.4);
}
.tascaPrograma .tascaPrograma__cap {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.6em 0.9em;
  border-bottom: 1px solid var(--color-border);
}
.tascaPrograma .tascaPrograma__cap b {
  flex: 1;
}
.tascaPrograma .tascaPrograma__cos {
  padding: 0.9em;
}
.tascaPrograma .tascaPrograma__ajuda {
  margin: 0 0 0.8em;
  color: var(--color-text-2);
}
.tascaPrograma .tascaPrograma__peu {
  display: flex;
  justify-content: flex-end;
  gap: 0.6em;
  padding: 0.6em 0.9em;
  border-top: 1px solid var(--color-border);
}
.tascaPrograma .tascaPrograma__tanca {
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
}
.tascaPrograma .tascaPrograma__principal, .tascaPrograma .tascaPrograma__secundari {
  padding: 0.45em 1.1em;
  border-radius: 4px;
  cursor: pointer;
}
.tascaPrograma .tascaPrograma__principal {
  background-color: var(--color1);
  color: var(--color-clar-1);
  border: 0;
}
.tascaPrograma .tascaPrograma__secundari {
  background: transparent;
  border: 1px solid var(--color-border);
  color: inherit;
}

body #debug-info {
  position: fixed;
  padding: 1rem;
  top: 1.25rem;
  right: -50vw;
  z-index: 99;
  height: calc(100dvh - 0.8rem - 4.25rem);
  overflow: auto;
  width: 50vw;
  background-color: var(--color-editable);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
}
body.debug #dades {
  width: 50vw;
}
body.debug #debug-info {
  right: 0.8rem;
}
@starting-style {
  body.animate div.dada, body.animate div.full, body.animate .apartat, body.animate tr {
    scale: 0;
  }
}
body.animate div.dada, body.animate div.full, body.animate .apartat, body.animate tr {
  transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out, display 0.3s ease-in-out allow-discrete;
}
body.animate div.dada[hidden]:not(.always-visible), body.animate div.dada.hidden-distraction:not(.always-visible), body.animate div.full[hidden]:not(.always-visible), body.animate div.full.hidden-distraction:not(.always-visible), body.animate .apartat[hidden]:not(.always-visible), body.animate .apartat.hidden-distraction:not(.always-visible), body.animate tr[hidden]:not(.always-visible), body.animate tr.hidden-distraction:not(.always-visible) {
  opacity: 0;
}
@starting-style {
  body.animate div.dada[hidden]:not(.always-visible), body.animate div.dada.hidden-distraction:not(.always-visible), body.animate div.full[hidden]:not(.always-visible), body.animate div.full.hidden-distraction:not(.always-visible), body.animate .apartat[hidden]:not(.always-visible), body.animate .apartat.hidden-distraction:not(.always-visible), body.animate tr[hidden]:not(.always-visible), body.animate tr.hidden-distraction:not(.always-visible) {
    opacity: 1;
    scale: 1;
  }
}
body #menuLoading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-fons);
  opacity: 0.7;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  transition: opacity 0.5s ease;
}
body #menuLoading .loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75em;
}
body #menuLoading .loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid var(--color3);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}
body #menuLoading .text {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  text-align: center;
}
body #menuLoading .menuLoadingAvis {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  max-width: 30em;
  text-align: center;
}
body #menuLoading .menuLoadingAvis button {
  height: 25px;
}
body.loaded #menuLoading {
  pointer-events: none;
  opacity: 0;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.croppie-div {
  position: absolute;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  padding: 0;
  background-color: var(--color-fons);
  align-items: center;
  z-index: 100;
  display: flex;
  flex-flow: column;
}
.croppie-div h1 {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.croppie-div h1 > * {
  text-align: center;
  margin: 0 0.5em;
}
.croppie-div #croppie {
  flex: 1;
}

#ajuda {
  resize: both;
  overflow: hidden;
  position: absolute;
  top: 10vh;
  top: 10dvh;
  left: 30vw;
  left: 30dvw;
  width: 50vw;
  width: 50dvw;
  height: 60vh;
  height: 60dvh;
  z-index: 100;
}
#ajuda .apartat {
  height: 100%;
  width: 100%;
}
#ajuda #ajuda-content {
  max-height: 90%;
  max-width: 100%;
  padding: 1em;
  overflow: auto;
}

[ajuda-src]::after {
  content: "\f059";
  font: var(--fa-font-regular);
  font-weight: 200;
  margin-left: 0.25em;
}

.menuTornaL {
  float: left;
}

body.apartat-resizing,
body.apartat-resizing * {
  cursor: ns-resize !important;
  user-select: none !important;
}

.apartat {
  background-color: var(--color-fons);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  margin: 0.5rem;
  padding: 1rem;
  position: relative;
}
.apartat::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 14px;
  height: 14px;
  z-index: 4;
  cursor: ns-resize;
  opacity: 0;
  transition: opacity 0.15s;
  background: linear-gradient(135deg, transparent 0 6px, var(--color-border) 6px 7px, transparent 7px 9px, var(--color-border) 9px 10px, transparent 10px);
}
.apartat:hover::after {
  opacity: 0.55;
}
.apartat.maximized::after {
  display: none;
}
@media (max-width: 30rem) {
  .apartat .full[class*=filtre-], .apartat .titolApartatFiltres {
    display: none;
  }
}
.apartat input, .apartat .btnInput, .apartat select, .apartat textarea, .apartat .ts-wrapper {
  border: 1px solid var(--color-border);
  padding: 0.2em 0.4em;
}
.apartat input[type=range], .apartat .btnInput[type=range], .apartat select[type=range], .apartat textarea[type=range], .apartat .ts-wrapper[type=range] {
  padding: 0;
  vertical-align: bottom;
  width: 4em;
}
.apartat select {
  padding: 0.127em 0.4em;
}
.apartat .titolApartat, .apartat > h1, .apartat > .h1 {
  font-size: 1.2rem;
  font-weight: normal;
  color: var(--color3);
  padding-bottom: 0.25rem;
  margin-bottom: 0.25rem;
}
.apartat .titolApartat *:first-child, .apartat > h1 *:first-child, .apartat > .h1 *:first-child {
  white-space: nowrap;
}
.apartat .titolApartat > label:not(.etiqueta):not(.tipus-etiqueta), .apartat .titolApartat > .dragzone > label:not(.etiqueta):not(.tipus-etiqueta), .apartat > h1 > label:not(.etiqueta):not(.tipus-etiqueta), .apartat > h1 > .dragzone > label:not(.etiqueta):not(.tipus-etiqueta), .apartat > .h1 > label:not(.etiqueta):not(.tipus-etiqueta), .apartat > .h1 > .dragzone > label:not(.etiqueta):not(.tipus-etiqueta) {
  color: inherit;
}
@media (max-width: 30rem) {
  .apartat .titolApartat, .apartat > h1, .apartat > .h1 {
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 100;
  }
}
.apartat .titolApartat .titolApartatFiltres, .apartat > h1 .titolApartatFiltres, .apartat > .h1 .titolApartatFiltres {
  position: relative;
  color: var(--color-text);
  font-size: 0.9rem;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  font-weight: 500;
}
.apartat .titolApartat .titolApartatFiltres .dada.full, .apartat > h1 .titolApartatFiltres .dada.full, .apartat > .h1 .titolApartatFiltres .dada.full {
  width: auto !important;
}
.apartat .titolApartat .titolApartatFiltres div[class*=filtre-].full, .apartat > h1 .titolApartatFiltres div[class*=filtre-].full, .apartat > .h1 .titolApartatFiltres div[class*=filtre-].full {
  display: inline-flex;
  width: auto !important;
}
.apartat .titolApartat .titolApartatFiltres div[class*=filtre-].full.filtre-adv, .apartat > h1 .titolApartatFiltres div[class*=filtre-].full.filtre-adv, .apartat > .h1 .titolApartatFiltres div[class*=filtre-].full.filtre-adv {
  display: block;
}
.apartat .titolApartat .titolApartatFiltres div[class*=filtre-].full div[class*="filte[*"], .apartat > h1 .titolApartatFiltres div[class*=filtre-].full div[class*="filte[*"], .apartat > .h1 .titolApartatFiltres div[class*=filtre-].full div[class*="filte[*"] {
  display: inline-flex;
}
.apartat .titolApartat .titolApartatFiltres .dada.full, .apartat > h1 .titolApartatFiltres .dada.full, .apartat > .h1 .titolApartatFiltres .dada.full {
  float: none;
  width: auto;
}
.apartat .titolApartat .titolApartatFiltres [class^="filtre["], .apartat > h1 .titolApartatFiltres [class^="filtre["], .apartat > .h1 .titolApartatFiltres [class^="filtre["] {
  display: flex;
  flex-flow: row wrap;
}
.apartat .titolApartat .titolApartatFiltres > *:not(script, label), .apartat > h1 .titolApartatFiltres > *:not(script, label), .apartat > .h1 .titolApartatFiltres > *:not(script, label) {
  display: inline-block;
}
.apartat .titolApartat .titolApartatFiltres > span, .apartat .titolApartat .titolApartatFiltres > label, .apartat > h1 .titolApartatFiltres > span, .apartat > h1 .titolApartatFiltres > label, .apartat > .h1 .titolApartatFiltres > span, .apartat > .h1 .titolApartatFiltres > label {
  margin-left: 0.5rem;
}
.apartat .titolApartat .titolApartatFiltres > form, .apartat .titolApartat .titolApartatFiltres > span:has(> label, > select, > .ts-wrapper), .apartat > h1 .titolApartatFiltres > form, .apartat > h1 .titolApartatFiltres > span:has(> label, > select, > .ts-wrapper), .apartat > .h1 .titolApartatFiltres > form, .apartat > .h1 .titolApartatFiltres > span:has(> label, > select, > .ts-wrapper) {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
}
.apartat .titolApartat .titolApartatFiltres > form > .ts-wrapper, .apartat .titolApartat .titolApartatFiltres > span:has(> label, > select, > .ts-wrapper) > .ts-wrapper, .apartat > h1 .titolApartatFiltres > form > .ts-wrapper, .apartat > h1 .titolApartatFiltres > span:has(> label, > select, > .ts-wrapper) > .ts-wrapper, .apartat > .h1 .titolApartatFiltres > form > .ts-wrapper, .apartat > .h1 .titolApartatFiltres > span:has(> label, > select, > .ts-wrapper) > .ts-wrapper {
  flex: 0 1 auto;
}
.apartat .titolApartat .titolApartatFiltres label:has(> select, > .ts-wrapper), .apartat > h1 .titolApartatFiltres label:has(> select, > .ts-wrapper), .apartat > .h1 .titolApartatFiltres label:has(> select, > .ts-wrapper) {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}
.apartat .titolApartat.flex, .apartat > h1.flex, .apartat > .h1.flex {
  display: flex;
  align-items: baseline;
  gap: 0 0.5em;
}
.apartat .titolApartat.flex .titolApartatFiltres, .apartat .titolApartat.flex .flex, .apartat .titolApartat.flex form, .apartat > h1.flex .titolApartatFiltres, .apartat > h1.flex .flex, .apartat > h1.flex form, .apartat > .h1.flex .titolApartatFiltres, .apartat > .h1.flex .flex, .apartat > .h1.flex form {
  width: 0;
  flex: min-content;
  display: flex;
  align-items: baseline;
}
.apartat div.dada.flex {
  max-width: 100%;
}
.apartat div.dada.flex.full {
  width: 100%;
}
.apartat div.dada.flex > div {
  flex-grow: 1;
}
.apartat div.dada.flex > input[type=text][size=""], .apartat div.dada.flex input[type=text]:not([size]), .apartat div.dada.flex select, .apartat div.dada.flex textarea, .apartat div.dada.flex input[type=url], .apartat div.dada.flex input[type=email], .apartat div.dada.flex textarea + div {
  flex: 1;
  flex-basis: 50%;
  min-width: 1em;
}
@media (max-width: 30rem) {
  .apartat div.dada.flex > input[type=text][size=""], .apartat div.dada.flex input[type=text]:not([size]), .apartat div.dada.flex select, .apartat div.dada.flex textarea, .apartat div.dada.flex input[type=url], .apartat div.dada.flex input[type=email], .apartat div.dada.flex textarea + div {
    max-width: 75vw;
    max-width: 75dvw;
  }
}
.apartat div.dada.flex > textarea, .apartat div.dada.flex > textarea + div {
  flex-basis: 100%;
}
.apartat .grupCamps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.8rem;
  width: 100%;
}
.apartat .grupCamps + .grupCamps {
  margin-top: 0.6rem;
  padding-top: 0.3rem;
  border-top: 1px solid var(--color-border);
}
.apartat .grupCamps > .titolGrup {
  flex: 0 0 100%;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.8rem;
  text-transform: uppercase;
  color: var(--color-text-2);
}
.apartat .grupCamps > .dada {
  float: none;
}
.apartat .grupCamps > .full {
  flex: 0 0 100%;
}
@media (max-width: 30rem) {
  .apartat .grupCamps .dada, .apartat .grupCamps .dada > label {
    white-space: normal;
  }
  .apartat .grupCamps .dada > label {
    line-height: 1.3;
  }
}
.apartat .grupCamps > .nota {
  flex: 0 0 100%;
  margin: 0.2rem 0;
  white-space: normal;
  line-height: 1.4;
  color: var(--color-text-2);
}

.apartat .jsoneditor * {
  font-family: inherit !important;
  font-size: inherit !important;
}
.apartat .jsoneditor .jsoneditor-menu {
  background-color: var(--color-fons-2);
  border: 0;
}
.apartat .jsoneditor {
  border: 0;
}

.filtres-modal .filtres-modal__fons {
  position: fixed;
  inset: 0;
  z-index: 98;
  background-color: var(--color-fons-modal);
}
.filtres-modal .filtres-modal__panel {
  position: fixed;
  z-index: 99;
  top: 7vh;
  left: max(4vw, 50vw - 460px);
  right: max(4vw, 50vw - 460px);
  max-height: 86vh;
  display: flex;
  flex-flow: column;
  background-color: var(--color-fons);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
  color: var(--color-text);
  font-size: 14px;
  font-weight: normal;
  line-height: normal;
  text-align: left;
}
.filtres-modal .filtres-modal__cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  padding: 0.75em 1em;
  border-bottom: 1px solid var(--color-border);
  font-size: 16px;
  color: var(--color-text);
}
.filtres-modal .filtres-modal__tanca {
  cursor: pointer;
  padding: 0.25em;
  color: var(--color-text-2);
}
.filtres-modal .filtres-modal__tanca:hover {
  color: var(--color-text);
}
.filtres-modal .filtres-modal__cos {
  flex: 1;
  overflow: auto;
  padding: 0.75em 1em;
}
.filtres-modal .filtres-modal__cos > div,
.filtres-modal .filtres-modal__cos > div > div {
  float: none;
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  gap: 0.25em 1.25em;
  width: 100%;
}
.filtres-modal .filtres-modal__cos div.dada {
  float: none;
}
.filtres-modal .filtres-modal__cos [data-show-hide-fields] {
  display: none;
}
@media (max-width: 30rem) {
  .filtres-modal .filtres-modal__cos .full[class*=filtre-] {
    display: block;
  }
  .filtres-modal .filtres-modal__cos > div.full[class*=filtre-],
  .filtres-modal .filtres-modal__cos > div > div.full[class*=filtre-] {
    display: flex;
  }
}
.filtres-modal .filtres-modal__peu {
  display: flex;
  justify-content: flex-end;
  gap: 0.5em;
  padding: 0.75em 1em;
  border-top: 1px solid var(--color-border);
}
.filtres-modal .filtres-modal__btn {
  min-width: 90px;
  padding: 0.4em 1em;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background-color: var(--color-fons);
  color: var(--color-text);
  cursor: pointer;
}
.filtres-modal .filtres-modal__btn:hover {
  background-color: var(--color-hover);
}
.filtres-modal .filtres-modal__btn.filtres-modal__btn--cerca {
  border-color: var(--apl-primary);
  background-color: var(--apl-primary);
  color: var(--color-clar-1);
}
.filtres-modal .filtres-modal__btn.filtres-modal__btn--cerca:hover {
  background-color: color-mix(in srgb, var(--apl-primary) 88%, black);
}

@media (max-width: 30rem) {
  body:has(.filtres-modal) .apartat .titolApartat, body:has(.filtres-modal) .apartat > h1, body:has(.filtres-modal) .apartat > .h1 {
    z-index: auto;
  }
}
.fa-filter[data-show-hide-fields][data-filtres-modal]::after {
  content: none;
}

#estadistiquesGeneric .filtres div.dada.flex-rw[class*=filtre-grup],
#llistaConfiguracioFiltres div.dada.flex-rw[class*=filtre-grup],
.filtres-per-files div.dada.flex-rw[class*=filtre-grup] {
  clear: left;
}

.il:hover, .menu li:hover, .fila-titol {
  background-color: var(--color-hover) !important;
  border-radius: 5px;
}

.linkMenu {
  font-weight: normal;
}

.fade-out {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.3s, opacity 0.3s ease-in-out;
}

.fade-in {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.blink {
  -webkit-animation: blink 0.75s linear infinite;
  -moz-animation: blink 0.75s linear infinite;
  animation: blink 0.75s linear infinite;
}

.iconaFormulari {
  border: 0;
  height: 16px;
  padding: 0;
  vertical-align: text-bottom;
}

.iconaSubFormulari {
  border: 0;
  height: 12px;
  padding: 3px 0;
  vertical-align: text-bottom;
}

.img-qr {
  height: 4rem;
  width: auto;
}

.img-mini {
  position: relative;
  height: 2em;
}
.img-mini img {
  height: inherit;
  max-height: 2em;
}
.img-mini img:hover {
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
  height: auto;
  max-height: none;
  z-index: 5;
}

.text-small {
  font-size: 0.8rem;
  line-height: 0;
}

/* Colors */
.textAsistenciaUrgent {
  background-color: rgba(255, 0, 0, 0.05);
}

.textAlerta {
  color: var(--color-perill) !important;
}
.textAlerta input, .textAlerta select, .textAlerta textarea {
  color: inherit;
}

.textAlerta2 {
  color: var(--color-avis-text) !important;
}
.textAlerta2 input, .textAlerta2 select, .textAlerta2 textarea {
  color: inherit;
}

.filaProjecte {
  color: var(--color-projecte) !important;
}

.textImportant {
  color: var(--color-perill);
}

.textLight {
  opacity: 0.25;
}

tr.textImportant td, .table-div > .textImportant, .table-div > div > .textImportant {
  font-weight: bold;
  color: var(--color-text-2);
}
tr.textImportant td *, .table-div > .textImportant *, .table-div > div > .textImportant * {
  font-weight: inherit;
}

.textDestacat {
  font-weight: bolder;
}

.valoracio-formador {
  font-weight: 700;
  font-size: 1.1em;
  cursor: pointer;
}
.valoracio-formador:hover {
  text-decoration: underline;
}

.lc-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}
.lc-1:hover {
  -webkit-line-clamp: initial;
  line-clamp: initial;
}

.lc-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}
.lc-2 > .lc-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lc-2:hover {
  -webkit-line-clamp: initial;
  line-clamp: initial;
}
.lc-2:hover > .lc-line {
  white-space: normal;
}

.lc-3 {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}
.lc-3:hover {
  -webkit-line-clamp: initial;
  line-clamp: initial;
}

.li-btn {
  display: inline-block;
  position: relative;
}
.li-btn > div {
  padding: 0.5em;
  border: 1px solid var(--color-border);
  border-radius: 0.25em;
  left: 13px;
  top: -3px;
  position: absolute;
  background-color: var(--color-editable);
  z-index: 1;
  display: none;
}
.li-btn > div > div {
  padding: 0.5em 0.5em;
}
.li-btn:hover > div {
  display: inline;
}

.cal-ev.citaLliure {
  border-color: green;
  border-style: dashed;
}
.cal-ev.citaOcupada {
  border-color: rgba(255, 0, 0, 0.5);
}
.cal-ev.citaGoogle .cal-ev-titol::before {
  content: "\f1a0";
  margin-right: 0.25em;
  font: var(--fa-font-brands);
  font-size: 0.85em;
}

.agendaCitaGoogle {
  margin-left: 0.5em;
  color: var(--color-text-2);
  font-size: 0.85em;
  font-weight: normal;
  white-space: nowrap;
}
.cal-col {
  border: 1px solid var(--color-border);
  margin: 0;
  padding: 0;
  border-collapse: separate;
}

.cal-col [onclick]:not([onclick=""]) :hover {
  background-color: var(--color-hover);
  border-color: var(--color-hover);
  text-decoration: none;
}

.cal-horari {
  position: absolute;
  border: 1px solid var(--color-fons);
  border-collapse: collapse;
  font-size: 0.8em;
  border-radius: 5px;
  overflow: hidden;
}
.cal-horari div {
  padding: 1px;
  white-space: nowrap;
}

.cal-horari-fix div {
  white-space: normal;
}

.cal-hora {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-text);
  opacity: 0.5;
  color: var(--color-text-invertit);
  font-weight: bold;
  width: 100%;
  white-space: nowrap;
  overflow: inherit;
}

.cal-time-pri {
  border-bottom: 1px solid var(--color-border);
  width: 100%;
  text-align: right;
  margin: 0;
  border-collapse: separate;
  padding: 0;
}

.cal-time-sec {
  border-bottom: 1px dotted var(--color-border);
  width: 100%;
  text-align: right;
  margin: 0;
  border-collapse: separate;
  padding: 0;
}

.color-avui {
  background-color: var(--color-fons-2);
  border: 1px solid var(--color-border);
}

.color-festiu {
  background-color: var(--color-hover);
}

.color-absencia {
  background-color: var(--color1);
}

.color-titol-cal {
  background-color: var(--color-fons);
  color: var(--color-text);
  border-width: 0;
}

.nvs {
  display: none !important;
}

.tree ul, .tree li {
  padding: 0;
  margin: 0;
  list-style: none;
  line-height: 2em;
}
.tree > ul > li .hl {
  display: none;
}
.tree > ul > li > ul {
  margin-left: 0.5em;
}
.tree li > label {
  margin: 0;
}
.tree ul > li {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
.tree > ul ul > li > ul {
  margin-left: 1.7em;
}
.tree > ul ul .hl {
  display: inline-block;
  border-top: 2px;
  border-style: dashed;
  border-color: var(--color-border);
  width: 1em;
  margin-right: 0.25em;
}
.tree {
  user-select: none;
}
.tree input.branca {
  position: absolute;
  opacity: 0;
}
.tree a {
  text-decoration: none;
}
.tree input ~ ul {
  display: none;
  border-left: 2px;
  border-style: dashed;
  border-color: var(--color-border);
}
.tree input:disabled + label {
  cursor: default;
  opacity: 0.6;
}
.tree input:checked:not(:disabled) ~ ul {
  display: block;
}
.tree input + label:not([for=""])::before {
  font: var(--fa-font-solid);
  content: "\f138";
  padding-right: 0.25em;
  color: var(--color1);
}
.tree input:checked + label:not([for=""])::before {
  content: "\f13a";
}
.tree label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  width: 5em;
}

#selectorDates {
  padding: 0.5rem;
  background-color: var(--color-editable);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 24px 0 var(--color-border);
  color: var(--color-text-2);
}
#selectorDates td, #selectorDates th {
  padding: 0.5em;
  text-align: center;
  vertical-align: middle;
  border: 0;
}
#selectorDates td.colorFilaImportant, #selectorDates th.colorFilaImportant {
  background-color: var(--color-fons);
}
#selectorDates td:first-child, #selectorDates td:last-child, #selectorDates th:first-child, #selectorDates th:last-child {
  padding: 0 !important;
}
#selectorDates td:hover, #selectorDates th:hover {
  background-color: var(--color-hover);
}

table .ts-wrapper {
  width: 100%;
}
table .ts-wrapper.multi {
  width: 100%;
  max-width: 100%;
}

.ts-wrapper {
  min-width: 8em;
  max-width: inherit;
  flex: 1 50%;
  vertical-align: inherit;
  color: var(--color-text);
}
.ts-wrapper .ts-control {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0 !important;
  min-height: 0;
  font-size: inherit;
  line-height: normal;
  box-shadow: none;
  cursor: pointer;
}
.ts-wrapper .ts-control > input {
  color: inherit;
  font: inherit;
  min-width: 4em;
  cursor: inherit;
}
.ts-wrapper .ts-control > input::placeholder {
  color: var(--color-text-2);
  opacity: 1;
}
.ts-wrapper.focus .ts-control, .ts-wrapper.input-active .ts-control, .ts-wrapper.single.input-active .ts-control {
  background: transparent;
}
.ts-wrapper.focus {
  background-color: var(--color-editable);
  box-shadow: 0 0 2px 1px var(--color3);
}
.ts-wrapper.single.focus .ts-control > .item {
  background: Highlight;
  color: HighlightText;
}
.ts-wrapper.single.ts-escrivint .ts-control > .item {
  display: none;
}
.ts-wrapper.single .ts-control {
  flex-wrap: nowrap;
}
.ts-wrapper.single .ts-control > .item {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ts-wrapper.single.has-items .ts-control > input {
  flex-basis: 0;
  min-width: 0;
}
.ts-wrapper.multi {
  flex: 1 1 auto;
  width: max-content;
  max-width: 50vw;
}
.ts-wrapper.multi .ts-control {
  padding: 0 !important;
}
.ts-wrapper.multi .ts-control > .item {
  background: var(--color-fons-2);
  color: var(--color-text);
  border: 0;
  border-radius: 3px;
  margin: 0 0.25em 0.1em 0;
  padding: 0 0.4em;
}
.ts-wrapper.multi .ts-control > .item.active {
  background: var(--color-hover);
  color: var(--color-text);
}
.ts-wrapper.multi.has-items .ts-control {
  padding: 0 !important;
}
.ts-wrapper.multi.has-items .ts-control > input::placeholder {
  color: transparent;
}
.ts-wrapper.plugin-remove_button .item .remove {
  border-left-color: var(--color-border);
  padding: 0 0.3em;
}
.ts-wrapper.plugin-remove_button .item .remove:hover {
  background: var(--color-hover);
}
.ts-wrapper .clear-button {
  color: var(--color-text-2);
  right: 0.2em;
}
.ts-wrapper .clear-button:hover {
  color: var(--color-text);
}
.ts-wrapper.disabled {
  opacity: 1;
  color: gray;
  cursor: not-allowed;
  background-color: var(--color-fons-2);
}
.ts-wrapper.disabled .ts-control {
  background: transparent;
  color: inherit;
}

.ts-dropdown {
  z-index: 1051;
  max-width: min(90vw, 40em);
  background: var(--color-fons);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-top: 0;
  border-radius: 0 0 3px 3px;
  font: inherit;
  margin: 0;
}
.ts-dropdown .optgroup-header {
  background: var(--color-fons-2);
  color: var(--color-text-2);
  font-weight: bold;
}
.ts-dropdown .active {
  background: var(--color-hover);
  color: var(--color-text);
}
.ts-dropdown .no-results,
.ts-dropdown .no-more-results,
.ts-dropdown .loading-more-results {
  color: var(--color-text-2);
  padding: 0.35em 0.6em;
}
.ts-dropdown .spinner::after {
  border-color: var(--color-border) transparent var(--color-border) transparent;
}
.ts-dropdown .ts-nom {
  display: block;
}
.ts-dropdown .ts-ajuda {
  display: block;
  color: var(--color-text-2);
  font-size: 0.85em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-dropdown-content {
  max-height: 40vh;
}

.flex-rw {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
}
.flex-rw > form {
  display: flex;
  flex-wrap: wrap;
}
.flex-rw .apartat {
  flex: 1 0;
}
.flex-rw .apartat > div.dada.full, .flex-rw .apartat div.dada.half {
  display: flex;
}
.flex-rw .apartat > div.dada.full input:not([type=checkbox]), .flex-rw .apartat > div.dada.full select, .flex-rw .apartat > div.dada.full textarea, .flex-rw .apartat div.dada.half input:not([type=checkbox]), .flex-rw .apartat div.dada.half select, .flex-rw .apartat div.dada.half textarea {
  flex: 1 1;
}
.flex-rw > div.dada.flex {
  flex: 1 0;
}
.flex-rw::after {
  content: "";
  flex: auto;
}

#usuariRestriccions {
  grid-template-columns: minmax(0, 1fr);
}
#usuariRestriccions .titolApartatFiltres .textAlerta {
  white-space: normal;
}
#usuariRestriccions > div {
  container-type: inline-size;
}

#usuariRestriccions .restriccions-graella {
  display: grid;
  grid-template-columns: max-content max-content minmax(10rem, 1fr);
  align-items: center;
  gap: 0.2rem 1rem;
}
#usuariRestriccions .restriccions-graella > .dada {
  float: none;
  min-width: 0;
  padding: 0;
}
#usuariRestriccions .restriccions-graella > .restriccions-sol {
  grid-column: 1/-1;
}
#usuariRestriccions .restriccions-graella .restriccions-control .ts-wrapper {
  width: 100%;
}
#usuariRestriccions .restriccions-graella .restriccions-etiqueta {
  margin: 0;
  white-space: nowrap;
}

@container (max-width: 36rem) {
  #usuariRestriccions .restriccions-graella {
    grid-template-columns: max-content minmax(0, 1fr);
  }
  #usuariRestriccions .restriccions-graella > .restriccions-permis {
    grid-column: 1/-1;
  }
  #usuariRestriccions .restriccions-graella .restriccions-etiqueta {
    margin-left: 1.75rem;
  }
}
@container (max-width: 28rem) {
  #usuariRestriccions .restriccions-graella {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }
  #usuariRestriccions .restriccions-graella .restriccions-etiqueta {
    white-space: normal;
  }
  #usuariRestriccions .restriccions-graella .restriccions-control {
    margin-left: 1.75rem;
  }
}

.pac-container {
  min-width: 20em;
}

.leaflet-container {
  box-sizing: border-box;
  z-index: 4;
}
.leaflet-container .legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background-color: rgba(255, 255, 255, 0.75);
  margin: 0.5em;
  padding: 0.25em 0.5em;
  border-radius: 4px;
  max-height: 75vh;
  max-height: 75dvh;
  overflow: auto;
}
.leaflet-container .legend > * {
  margin: 0 0.5em;
}
.leaflet-container .legend .legend tr:hover {
  background-color: lightgrey;
}
.leaflet-container .legend .legend td {
  padding: 0.25em;
  vertical-align: baseline;
}

#cercaNausLocalsTipus {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 0.4em 0;
}

.nlChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background-color: var(--color-editable);
  color: var(--color-text-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: all 0.12s;
}

.nlChip input {
  display: none;
}

.nlChip--tipus.actiu {
  background-color: #3d7a9e;
  border-color: #3d7a9e;
  color: #fff;
}

.nlChip--buits.actiu {
  background-color: #f59e0b;
  border-color: #d97706;
  color: #fff;
}

.nlChip--ocupats.actiu {
  background-color: #64748b;
  border-color: #475569;
  color: #fff;
}

.nlChip--anunci.actiu {
  background-color: #7c5cd6;
  border-color: #7c5cd6;
  color: #fff;
}

#cercaNausLocalsOcupacio {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 0.6em;
  padding-left: 0.6em;
  border-left: 1px solid var(--color-border);
}

#cercaNausLocalsAnunci {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-left: 0.6em;
  padding-left: 0.6em;
  border-left: 1px solid var(--color-border);
}

.nlAvisAnuncis {
  font-size: 12px;
  color: var(--color-text-2);
}

.nlAvisAnuncis a {
  text-decoration: underline;
}

#cercaNausLocalsPoligon {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-left: 0.6em;
  font-size: 13px;
  color: var(--color-text-2);
}

#cercaNausLocalsPoligon select {
  padding: 0.25em 0.5em;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: var(--color-fons);
  color: var(--color-text-2);
  font-size: 13px;
}

#cercaNausLocalsVista {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 1em;
  vertical-align: middle;
}

#cercaNausLocalsVista button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background-color: var(--color-editable);
  color: var(--color-text-2);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

#cercaNausLocalsVista button.actiu {
  background-color: var(--color3);
  border-color: var(--color3);
  color: #fff;
}

#cercaNausLocalsParcelles,
#cercaNausLocalsPoligonsGeo,
#cercaNausLocalsAnuncis,
#cercaNausLocalsOrganitzacions {
  display: none;
  margin-left: 0.5em;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: var(--color-fons);
  color: var(--color-text-2);
  padding: 0.3em 0.7em;
  cursor: pointer;
  font-size: 0.9em;
  vertical-align: middle;
}

body[data-vista-naus-locals=mapa] #cercaNausLocalsParcelles,
body[data-vista-naus-locals=mapa] #cercaNausLocalsPoligonsGeo,
body[data-vista-naus-locals=mapa] #cercaNausLocalsAnuncis,
body[data-vista-naus-locals=mapa] #cercaNausLocalsOrganitzacions {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}

#cercaNausLocalsParcelles.actiu,
#cercaNausLocalsPoligonsGeo.actiu,
#cercaNausLocalsAnuncis.actiu,
#cercaNausLocalsOrganitzacions.actiu {
  background: var(--color3);
  color: var(--color-clar-2);
  border-color: var(--color3);
}

body[data-vista-naus-locals=mapa] #apartatInteriorCercaNou {
  display: none;
}

#cercaNausLocalsMapaWrap {
  display: none;
  position: relative;
  width: 100%;
}

#cercaNausLocalsMapaWrap.actiu {
  display: block;
}

#cercaNausLocalsMapa {
  width: 100%;
  height: 70vh;
  min-height: 30em;
  background: var(--color-fons);
}

.nlMk {
  transition: transform 0.12s ease;
}

.nlMk:hover {
  transform: scale(1.18);
  z-index: 9999 !important;
}

.nlMk--diana {
  z-index: 9999 !important;
}
.nlMk--diana::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 3px solid #8b5cf6;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
  pointer-events: none;
}
.nlMk--diana .nlMk {
  transform: scale(1.15);
}

#cercaNausLocalsLlegenda {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 600;
  width: 212px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-editable) 96%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.1);
  font-size: 12px;
  color: var(--color-text);
}

.nlLleg-titol {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-2);
}

.nlLleg-seccio {
  margin-bottom: 7px;
  font-weight: 600;
  color: var(--color-text-2);
}

.nlLleg-item {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
}

.nlLleg-item:last-child {
  margin-bottom: 0;
}

.nlLleg-grup {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 12px;
}

.nlLleg-grup .nlLleg-item {
  gap: 6px;
  margin-bottom: 0;
}

.nlLleg-sep {
  margin-bottom: 12px;
}

.nlLleg-mostra {
  flex: none;
  width: 15px;
  height: 15px;
  position: relative;
}

.nlLleg-mostra--cercle {
  border-radius: 50%;
}

.nlLleg-mostra--quadrat {
  border-radius: 3px;
}

.nlLleg-mostra--rombe {
  border-radius: 2px;
  transform: rotate(45deg);
}

.nlLleg-mostra--buit {
  background: #f59e0b;
  box-shadow: 0 0 0 1px #d97706;
}

.nlLleg-mostra--ocupat {
  background: #64748b;
  box-shadow: 0 0 0 1px #475569;
}

.nlLleg-mostra--tipus {
  background: #94a3b8;
}

.nlLleg-mostra--anunci {
  background: #8b5cf6;
  box-shadow: 0 0 0 1px #6d4ec9;
}

.nlLleg-mostra--org {
  background: #0d9488;
  box-shadow: 0 0 0 1px #0f766e;
}

.nlLleg-punt {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8b5cf6;
  border: 1.5px solid var(--color-editable);
}

.nlLleg-avis {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
  font-size: 11px;
  line-height: 1.35;
  color: var(--color-text-2);
}

@keyframes nlPop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
#cercaNausLocalsFitxa {
  display: none;
  position: absolute;
  right: 22px;
  top: 22px;
  z-index: 700;
  width: 320px;
  border-radius: 16px;
  background: var(--color-editable);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.22);
  overflow: hidden;
  animation: nlPop 0.18s ease;
}

#cercaNausLocalsFitxa.actiu {
  display: block;
}

.nlFitxa-foto {
  position: relative;
  height: 150px;
  background: repeating-linear-gradient(45deg, var(--color-fons-2), var(--color-fons-2) 10px, var(--color-fons) 10px, var(--color-fons) 20px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nlFitxa-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nlFitxa-foto--logo {
  background: var(--color-fons);
  padding: 12px;
}

.nlFitxa-foto--logo img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.nlFitxa-fotoBuida {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: var(--color-text-2);
}

.nlFitxa-tanca {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-editable) 90%, transparent);
  color: var(--color-text-2);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.nlFitxa-badges {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  gap: 6px;
}

.nlFitxa-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: color-mix(in srgb, var(--color-editable) 90%, transparent);
  color: var(--color-text);
}

.nlFitxa-badge--anunci {
  background: #8b5cf6;
  color: #fff;
}

.nlFitxa-badge--org {
  background: #0d9488;
  color: #fff;
}

.nlFitxa-badge--buit {
  background: #f59e0b;
  color: #fff;
}

.nlFitxa-badge--ocupat {
  background: #64748b;
  color: #fff;
}

.nlFitxa-cos {
  padding: 16px 18px 18px;
}

.nlFitxa-titol {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--color-text);
}

.nlFitxa-ref {
  margin-top: 4px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: var(--color-text-2);
}

.nlFitxa-sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--color-text-2);
}

.nlFitxa-stats {
  display: flex;
  gap: 20px;
  margin: 16px 0;
  padding: 14px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.nlFitxa-statTitol {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-2);
}

.nlFitxa-statValor {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}

.nlFitxa-statValor a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nlFitxa-anunci {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, #8b5cf6 32%, var(--color-editable));
  border-radius: 10px;
  background: color-mix(in srgb, #8b5cf6 12%, var(--color-editable));
}

.nlFitxa-anunciPunt {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #8b5cf6;
}

.nlFitxa-anunciText {
  font-size: 13px;
  font-weight: 600;
  color: color-mix(in srgb, #8b5cf6 60%, var(--color-text));
}

.nlFitxa-anunciPreu {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  color: color-mix(in srgb, #8b5cf6 45%, var(--color-text));
}

.nlFitxa-anuncis {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, #8b5cf6 32%, var(--color-editable));
  border-radius: 10px;
  background: color-mix(in srgb, #8b5cf6 12%, var(--color-editable));
}

.nlFitxa-anuncisTitol {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, #8b5cf6 55%, var(--color-text));
}

.nlFitxa-anunciItem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  color: inherit;
  text-decoration: none;
}
.nlFitxa-anunciItem:hover .nlFitxa-anunciFont {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nlFitxa-anunciFont {
  font-size: 13px;
  font-weight: 600;
  color: color-mix(in srgb, #8b5cf6 60%, var(--color-text));
}

.nlFitxa-accions {
  display: flex;
  gap: 9px;
  margin-top: 16px;
}

.nlFitxa-btn,
a.nlFitxa-btn:hover {
  color: var(--color-text);
}

.nlFitxa-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-editable);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.nlFitxa-btn--primari,
a.nlFitxa-btn--primari,
a.nlFitxa-btn--primari:hover {
  color: #fff;
}

.nlFitxa-btn--primari {
  border-color: var(--color3);
  background: var(--color3);
}

.nlFitxa-btn.actiu {
  border-color: #c0392b;
  color: #c0392b;
}

@media only print {
  body {
    height: auto;
    width: 100%;
    min-height: 100%;
  }
  body #dades {
    height: auto;
  }
  body .apartat {
    background-color: initial;
  }
  .apartatInterior {
    background-color: initial;
    height: auto !important;
    max-width: none !important;
  }
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .menuEsq, #menuTorna, .remove-print {
    display: none !important;
  }
  #calendari tr, #calendari .cal-horari {
    width: auto !important;
    height: auto !important;
  }
  .no-print {
    visibility: hidden;
  }
  #dades {
    left: 0;
    width: 100%;
    max-width: 100%;
    max-height: none;
    height: 100%;
    grid-template-rows: min-content;
  }
  #dades table td:first-child {
    position: sticky;
  }
  #dades table td.html > div {
    max-height: none;
    max-width: none;
  }
}
@keyframes animatemid {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes animateout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.topRightModal {
  top: 20px !important;
  left: auto !important;
  right: 20px !important;
  transform: translateY(0%) translateX(0%) !important;
}

.leavingModal {
  animation-name: animateout !important;
  animation-duration: 0.5s !important;
}

.confirmModal {
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: var(--color-fons-modal); /* Black w/ opacity */
  animation-name: animatemid;
  animation-duration: 0.5s;
  opacity: 1;
}

.toastModal {
  width: auto; /* Remove full width */
  height: auto; /* Remove full height */
  overflow: visible; /* Change to visible */
  background-color: transparent; /* Make it transparent */
  top: 20px !important;
  left: auto !important;
  right: 20px !important;
  transform: translateY(0%) translateX(0%) !important;
}

.confirmModal, .toastModal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  padding: 0;
  z-index: 100;
  /* Modal Content/Box */
}
.confirmModal .modal-content .titolApartat, .toastModal .modal-content .titolApartat {
  font-size: 1.2rem;
  font-weight: normal;
  color: var(--color3);
  padding-bottom: 0.25rem;
  margin-bottom: 0.25rem;
  min-height: 1.5rem;
  user-select: none;
}
.confirmModal .modal-content .modal-body, .toastModal .modal-content .modal-body {
  margin-bottom: 10px;
}
.confirmModal .modal-content .modal-body p, .toastModal .modal-content .modal-body p {
  margin-bottom: 5px;
}
.confirmModal .modal-content .modal-input .opcio-input, .toastModal .modal-content .modal-input .opcio-input {
  width: 100%;
  border: 2px solid var(--color3);
  margin: 0;
  border-radius: 5px;
  padding: 8px 5px;
}
.confirmModal .modal-content .modal-input, .toastModal .modal-content .modal-input {
  margin-bottom: 15px;
}
.confirmModal .modal-content, .toastModal .modal-content {
  background-color: var(--color-fons);
  padding: 20px;
  border: 1.5px solid var(--color-border);
  width: 30%; /* Could be more or less, depending on screen size */
  height: auto;
  max-width: 550px;
  min-width: 370px;
  border-radius: 8px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  animation-name: animatemid;
  animation-duration: 0.8s;
  display: grid;
}
.confirmModal .opcio-ok.opcio-cancela,
.confirmModal .opcio-cancela.opcio-cancela, .toastModal .opcio-ok.opcio-cancela,
.toastModal .opcio-cancela.opcio-cancela {
  color: var(--color3);
  background-color: var(--color-fons);
  margin-right: 0;
}
.confirmModal .opcio-ok.opcio-ok,
.confirmModal .opcio-cancela.opcio-ok, .toastModal .opcio-ok.opcio-ok,
.toastModal .opcio-cancela.opcio-ok {
  color: var(--color-fons);
  background-color: var(--color3);
}
.confirmModal .opcio-ok,
.confirmModal .opcio-cancela, .toastModal .opcio-ok,
.toastModal .opcio-cancela {
  border: 2px solid var(--color3);
  padding: 8px;
  border-radius: 5px;
  width: auto;
  min-width: max(20%, 80px);
  white-space: nowrap;
  float: right;
  margin-left: 5px;
  cursor: pointer;
}
.confirmModal .modal-foot, .toastModal .modal-foot {
  align-self: end;
}

/* Rotació d'elements */
.rotation-main-container {
  perspective: 1000px; /* Fundamental para el efecto 3D */
  user-select: none; /* Evita la selección de texto al hacer clic */
  /* overflow: hidden; */
  /* Descomenta si necesitas recortar el contenido que sobresale */
}
.rotation-main-container .wrapper-for-rotation {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d; /* Permite que los hijos se posicionen en 3D */
  transition: transform 0.8s ease-in-out; /* Velocidad y suavidad de la rotación */
  cursor: pointer; /* Indica que es clickable */
}
.rotation-main-container .content-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden; /* Oculta la parte trasera para que no se vea el reflejo */
  display: flex; /* Asegura que el SVG se centre si es necesario */
  justify-content: center;
  align-items: center;
  box-sizing: border-box; /* Incluye padding y borde en el tamaño */
}
.rotation-main-container .front {
  transform: rotateY(0deg);
}
.rotation-main-container .back {
  transform: rotateY(180deg);
}
.rotation-main-container .wrapper-for-rotation.rotated {
  transform: rotateY(180deg);
}

.btnPanell {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.9rem;
  height: 30px;
  margin-top: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-fons-2);
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s, transform 0.1s;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
}
.btnPanell i {
  font-size: 1rem;
  color: var(--color1);
  transition: transform 0.15s;
}
.btnPanell:hover {
  background: var(--color-editable);
  border-color: var(--color1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.btnPanell:hover i {
  transform: scale(1.15);
}
.btnPanell:active {
  transform: translateY(1px);
  box-shadow: none;
}
.btnPanell:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--color-fons-2);
  border-color: var(--color-border);
  box-shadow: none;
  transform: none;
}
.btnPanell:disabled i {
  transform: none;
}
:where(html.dark) .btnPanell i {
  color: color-mix(in srgb, var(--color1) 30%, var(--color-text));
}
:where(html.dark) .btnPanell:not(:hover):not(:disabled) {
  border-color: color-mix(in srgb, var(--color-text-2) 35%, var(--color-border));
}

@keyframes xalocFabPulse {
  0% {
    transform: scale(1);
    opacity: 0.45;
  }
  70% {
    transform: scale(1.6);
    opacity: 0;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
.xalocFab {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-end;
}

.xalocFab__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.xalocFab__item:hover .xalocFab__label {
  opacity: 1;
  transform: translateX(0);
}

.xalocFab__label {
  background: rgba(34, 41, 47, 0.82);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.3rem 0.65rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.xalocFab__btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--color1, #7367f0);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 4px 18px 0 rgba(115, 103, 240, 0.45);
  position: relative;
  isolation: isolate;
  overflow: visible;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}
.xalocFab__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color1, #7367f0);
  animation: xalocFabPulse 2.5s ease-out infinite;
  z-index: -1;
  pointer-events: none;
}
.xalocFab__btn i {
  position: relative;
  z-index: 2;
  color: #fff;
  pointer-events: none;
}
.xalocFab__btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px 0 rgba(115, 103, 240, 0.6);
  color: #fff;
}
.xalocFab__btn:hover i {
  color: #fff;
}
.xalocFab__btn:active {
  transform: scale(0.93);
}

.xalocProcessos {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
}

.xalocProces {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.xalocProces__dates {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.xalocProces__dates > div {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.xalocProces__dates dt {
  font-size: 0.75rem;
  color: var(--color-text-secundari, #888);
  white-space: nowrap;
}
.xalocProces__dates dt::after {
  content: ":";
}
.xalocProces__dates dd {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text);
}
.xalocProces__inputData {
  font-size: 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.15rem 0.35rem;
  color: var(--color-text);
  background: var(--color-fons);
}

@keyframes xalocOverlayIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes xalocBoxIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.modalXaloc {
  animation: xalocOverlayIn 0.4s ease;
  position: fixed;
  inset: 0;
  background: rgba(34, 41, 47, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modalXaloc[hidden] {
  display: none;
}
.modalXaloc__box {
  animation: xalocBoxIn 0.5s cubic-bezier(0.22, 0.68, 0, 1.2);
  background: var(--color-fons, #fff);
  border-radius: 12px;
  width: 580px;
  max-width: 94vw;
  box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.24);
  overflow: hidden;
}
.modalXaloc__cap {
  padding: 28px 28px 0;
}
.modalXaloc__titol {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text, #3d3d3d);
  margin: 0 0 0.35rem;
  line-height: 1.3;
}
.modalXaloc__subtitol {
  font-size: 1rem;
  color: var(--color-text-secundari, #6e6b7b);
  margin: 0;
  line-height: 1.5;
}
.modalXaloc__llista {
  margin: 0;
  padding: 0.5rem 0 0 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 1rem;
  color: var(--color-text-secundari, #6e6b7b);
  line-height: 1.5;
}
.modalXaloc__llista li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}
.modalXaloc__llista li::before {
  font: var(--fa-font-regular);
  content: "\f058";
  color: var(--color1, #7367f0);
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.modalXaloc__cos {
  padding: 20px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.modalXaloc__credencials {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.modalXaloc__camp {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.modalXaloc__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text, #3d3d3d);
}
.modalXaloc__passWrap {
  position: relative;
}
.modalXaloc__input {
  width: 100%;
  border: 1px solid #d8d6de;
  border-radius: 6px;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  background: var(--color-fons, #fff);
  color: var(--color-text, #3d3d3d);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.modalXaloc__passWrap .modalXaloc__input {
  padding-right: 2.8rem;
}
.modalXaloc__input::placeholder {
  color: #b9b9c3;
}
.modalXaloc__input:focus {
  border-color: var(--color1, #7367f0);
  box-shadow: 0 3px 10px 0 rgba(115, 103, 240, 0.15);
}
.modalXaloc__eye {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #b9b9c3;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  transition: color 0.15s;
}
.modalXaloc__eye:hover {
  color: var(--color1, #7367f0);
}
.modalXaloc__btn {
  width: 100%;
  padding: 0.72rem 1rem;
  background: var(--color1, #7367f0);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: filter 0.15s, box-shadow 0.15s, transform 0.1s;
  box-shadow: 0 4px 12px rgba(115, 103, 240, 0.35);
}
.modalXaloc__btn:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 16px rgba(115, 103, 240, 0.45);
}
.modalXaloc__btn:active {
  transform: scale(0.98);
}
.modalXaloc__disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: #f0f8ff;
  border: 1px solid #c9e4f9;
  border-radius: 6px;
  padding: 0.75rem 0.9rem;
  font-size: 0.8rem;
  line-height: 1.55;
  color: #3a6f9a;
}
.modalXaloc__disclaimer strong {
  display: block;
  margin-bottom: 0.2rem;
  color: #2c5f84;
  font-weight: 600;
}
.modalXaloc__disclaimerIco {
  font-size: 1.1rem;
  margin-top: 0.05rem;
  flex-shrink: 0;
  color: #4a90c4;
}
.modalXaloc__opcions {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.modalXaloc__opcio {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 0.8rem;
  background: var(--color-fons, #fff);
  color: var(--color-text-secundari, #6e6b7b);
  border: 1px solid #d8d6de;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.modalXaloc__opcio:hover {
  border-color: var(--color1, #7367f0);
  color: var(--color1, #7367f0);
}
.modalXaloc__opcio.actiu {
  background: var(--color1, #7367f0);
  border-color: var(--color1, #7367f0);
  color: #fff;
}
.modalXaloc__hint {
  font-size: 0.78rem;
  color: var(--color-text-secundari, #6e6b7b);
  line-height: 1.4;
}

#whatsappXatDrawer {
  position: fixed;
  bottom: 0;
  right: -380px;
  top: auto;
  width: 380px;
  max-width: 100vw;
  height: 600px;
  max-height: 100vh;
  background: #ffffff;
  color: #1a1a1a;
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.12), 0 -2px 12px rgba(0, 0, 0, 0.04);
  border-top-left-radius: 12px;
  z-index: 9000;
  transition: right 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
#whatsappXatDrawer.obert {
  right: 0;
}
#whatsappXatDrawer {
  /* Capçalera fixa compartida (títol WhatsApp + tancar) */
}
#whatsappXatDrawer .wa-flotant-header {
  background: #075e54;
  color: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
#whatsappXatDrawer .wa-flotant-header strong {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#whatsappXatDrawer .wa-flotant-header .wa-flotant-close {
  cursor: pointer;
  font-size: 16px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}
#whatsappXatDrawer .wa-flotant-header .wa-flotant-close:hover {
  background: rgba(255, 255, 255, 0.25);
}
#whatsappXatDrawer {
  /* Pestanyes dels xats oberts */
}
#whatsappXatDrawer .wa-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 12px;
  background: #f8f9fa;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}
#whatsappXatDrawer .wa-tabs .wa-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 3px 8px 3px 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  max-width: 160px;
  color: #374151;
  transition: background 0.15s, border-color 0.15s;
}
#whatsappXatDrawer .wa-tabs .wa-tab:hover {
  background: #f1f3f5;
}
#whatsappXatDrawer .wa-tabs .wa-tab .wa-tab-nom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#whatsappXatDrawer .wa-tabs .wa-tab .wa-tab-tanca {
  font-size: 11px;
  color: #9ca3af;
  padding: 2px 4px;
  border-radius: 50%;
}
#whatsappXatDrawer .wa-tabs .wa-tab .wa-tab-tanca:hover {
  color: #1a1a1a;
  background: rgba(0, 0, 0, 0.08);
}
#whatsappXatDrawer .wa-tabs .wa-tab.actiu {
  background: #075e54;
  border-color: #075e54;
  color: #fff;
}
#whatsappXatDrawer .wa-tabs .wa-tab.actiu .wa-tab-tanca {
  color: rgba(255, 255, 255, 0.85);
}
#whatsappXatDrawer .wa-tabs .wa-tab.wa-tab-llista {
  padding: 3px 10px;
}
#whatsappXatDrawer {
  /* Cos: hi va la llista de converses o el xat d'una persona */
}
#whatsappXatDrawer .wa-cos {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#whatsappXatDrawer {
  /* Cercador de la llista */
}
#whatsappXatDrawer .wa-cerca-box {
  padding: 8px 12px;
  background: #f8f9fa;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}
#whatsappXatDrawer .wa-cerca-input {
  width: 100%;
  padding: 6px 12px 6px 32px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: #1a1a1a;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 10px center;
  transition: border-color 0.15s;
}
#whatsappXatDrawer .wa-cerca-input:focus {
  outline: none;
  border-color: #075e54;
}
#whatsappXatDrawer {
  /* Títol del xat d'una persona (fletxa enrere + nom) */
}
#whatsappXatDrawer .wa-titol {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}
#whatsappXatDrawer .wa-titol .wa-btn-llista {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #6b7280;
  cursor: pointer;
  flex-shrink: 0;
}
#whatsappXatDrawer .wa-titol .wa-btn-llista:hover {
  background: #f3f4f6;
  color: #1a1a1a;
}
#whatsappXatDrawer .wa-titol .wa-titol-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e5e7eb;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
#whatsappXatDrawer .wa-titol .wa-titol-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#whatsappXatDrawer .wa-titol .wa-titol-nom {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#whatsappXatDrawer .wa-titol .wa-titol-nom i {
  color: #25d366;
}
#whatsappXatDrawer {
  /* Llista de converses (recents + no llegits) */
}
#whatsappXatDrawer .wa-pendents-llista {
  flex: 1;
  overflow-y: auto;
}
#whatsappXatDrawer .wa-pendent-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  grid-template-areas: "icona nom hora" "icona text count";
  gap: 2px 12px;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 1px solid #f1f3f5;
  transition: background 0.15s;
}
#whatsappXatDrawer .wa-pendent-item:hover {
  background: #f8f9fa;
}
#whatsappXatDrawer .wa-pendent-item[hidden] {
  display: none;
}
#whatsappXatDrawer .wa-pendent-item .wa-pendent-icona {
  grid-area: icona;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: #e5e7eb;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
}
#whatsappXatDrawer .wa-pendent-item .wa-pendent-icona img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#whatsappXatDrawer .wa-pendent-item .wa-pendent-icona.wa-pendent-inicials {
  background: linear-gradient(135deg, #0a7a7a, #0d9d9d);
}
#whatsappXatDrawer .wa-pendent-item .wa-pendent-nom {
  grid-area: nom;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-self: end;
}
#whatsappXatDrawer .wa-pendent-item .wa-pendent-text {
  grid-area: text;
  font-size: 13px;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#whatsappXatDrawer .wa-pendent-item .wa-pendent-hora {
  grid-area: hora;
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
  align-self: end;
}
#whatsappXatDrawer .wa-pendent-item .wa-pendent-count {
  grid-area: count;
  min-width: 20px;
  height: 18px;
  padding: 0 7px;
  border-radius: 10px;
  background: #25d366;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  justify-self: end;
}
#whatsappXatDrawer .wa-pendents-buit {
  text-align: center;
  color: #9ca3af;
  padding: 24px;
  margin: auto;
}
#whatsappXatDrawer .wa-missatges {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
}
#whatsappXatDrawer .wa-separador-data {
  align-self: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #6b7280;
  font-size: 12px;
  font-weight: 500;
  border-radius: 12px;
  padding: 4px 12px;
  margin: 8px 0;
}
#whatsappXatDrawer .wa-bombolla {
  display: flex;
  flex-direction: column;
  max-width: 78%;
  padding: 8px 12px 6px;
  border-radius: 16px;
  word-wrap: break-word;
  position: relative;
}
#whatsappXatDrawer .wa-entrant {
  background: #f3f4f6;
  color: #1a1a1a;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
#whatsappXatDrawer .wa-sortint {
  background: #128c7e;
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
#whatsappXatDrawer .wa-tecnic {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 2px;
}
#whatsappXatDrawer .wa-sortint .wa-tecnic {
  color: rgba(255, 255, 255, 0.9);
}
#whatsappXatDrawer .wa-text {
  display: block;
  font-size: 14px;
  line-height: 1.45;
}
#whatsappXatDrawer .wa-text a {
  color: #039be5;
  word-break: break-all;
}
#whatsappXatDrawer .wa-sortint .wa-text a {
  color: rgba(255, 255, 255, 0.9);
}
#whatsappXatDrawer .wa-imatge-link {
  display: block;
  align-self: flex-start;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 12px;
  margin: 4px 0;
  overflow: hidden;
}
#whatsappXatDrawer .wa-imatge {
  display: block;
  max-width: 240px;
  max-height: 240px;
  border-radius: 12px;
  object-fit: cover;
  cursor: pointer;
}
#whatsappXatDrawer .wa-audio-link,
#whatsappXatDrawer .wa-video-link {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 2px 0 4px;
  font-size: 13px;
  color: inherit;
  text-decoration: none;
}
#whatsappXatDrawer .wa-audio-link i,
#whatsappXatDrawer .wa-video-link i {
  color: #075e54;
  font-size: 16px;
}
#whatsappXatDrawer .wa-audio-link:hover,
#whatsappXatDrawer .wa-video-link:hover {
  background: rgba(0, 0, 0, 0.08);
}
#whatsappXatDrawer .wa-sortint .wa-audio-link,
#whatsappXatDrawer .wa-sortint .wa-video-link {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
#whatsappXatDrawer .wa-sortint .wa-audio-link i,
#whatsappXatDrawer .wa-sortint .wa-video-link i {
  color: #fff;
}
#whatsappXatDrawer .wa-sortint .wa-audio-link:hover,
#whatsappXatDrawer .wa-sortint .wa-video-link:hover {
  background: rgba(255, 255, 255, 0.28);
}
#whatsappXatDrawer .wa-document {
  display: inline-flex;
  flex-direction: column;
  align-self: flex-start;
  gap: 6px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  padding: 8px;
  margin: 2px 0 4px;
  font-size: 13px;
  color: inherit;
  text-decoration: none;
  max-width: 240px;
}
#whatsappXatDrawer .wa-document:hover {
  background: rgba(0, 0, 0, 0.08);
}
#whatsappXatDrawer .wa-document-preview {
  display: block;
  width: 224px;
  height: 120px;
  border-radius: 6px;
  object-fit: cover;
  object-position: top center;
  background: #fff;
}
#whatsappXatDrawer .wa-document-nom {
  display: block;
  max-width: 224px;
  line-height: 1.3;
  overflow-wrap: anywhere;
  word-break: break-word;
}
#whatsappXatDrawer .wa-document-nom i {
  color: #075e54;
  font-size: 18px;
  margin-right: 6px;
}
#whatsappXatDrawer .wa-sortint .wa-document {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
#whatsappXatDrawer .wa-sortint .wa-document:hover {
  background: rgba(255, 255, 255, 0.28);
}
#whatsappXatDrawer .wa-sortint .wa-document .wa-document-nom i {
  color: #fff;
}
#whatsappXatDrawer .wa-hora {
  font-size: 11px;
  color: #9ca3af;
  display: block;
  text-align: right;
  margin-top: 2px;
}
#whatsappXatDrawer .wa-sortint .wa-hora {
  color: rgba(255, 255, 255, 0.75);
}
#whatsappXatDrawer {
  /* Missatge citat (resposta) dins la bombolla */
}
#whatsappXatDrawer .wa-citat {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  padding: 4px 8px;
  margin-bottom: 4px;
  border-left: 3px solid #075e54;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  opacity: 0.85;
}
#whatsappXatDrawer .wa-sortint .wa-citat {
  border-left-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.18);
}
#whatsappXatDrawer {
  /* Icona "respon" que apareix en passar per sobre la bombolla */
}
#whatsappXatDrawer .wa-respon {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 12px;
  color: #9ca3af;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
#whatsappXatDrawer .wa-bombolla:hover .wa-respon {
  opacity: 1;
}
#whatsappXatDrawer .wa-sortint .wa-respon {
  color: rgba(255, 255, 255, 0.8);
}
#whatsappXatDrawer {
  /* Previsualització de la cita sobre l'input */
}
#whatsappXatDrawer .wa-cita-preview {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 6px 10px;
  margin: 4px 0;
  border-left: 3px solid #075e54;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 6px;
}
#whatsappXatDrawer .wa-cita-preview .wa-cita-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#whatsappXatDrawer .wa-cita-preview button {
  border: none;
  background: none;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}
#whatsappXatDrawer {
  /* Imatge sense text: es mostra sense bombolla, amb l'hora sobreposada (com al xat) */
}
#whatsappXatDrawer .wa-bombolla.wa-nomes-imatge {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  max-width: none;
  position: relative;
}
#whatsappXatDrawer .wa-bombolla.wa-nomes-imatge .wa-imatge-link {
  background: transparent;
  margin: 0;
}
#whatsappXatDrawer .wa-bombolla.wa-nomes-imatge .wa-imatge {
  max-width: 260px;
  max-height: 320px;
}
#whatsappXatDrawer .wa-bombolla.wa-nomes-imatge .wa-tecnic {
  position: absolute;
  top: 6px;
  left: 8px;
  margin: 0;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  font-weight: 600;
  z-index: 1;
}
#whatsappXatDrawer .wa-bombolla.wa-nomes-imatge .wa-hora {
  position: absolute;
  right: 8px;
  bottom: 8px;
  margin: 0;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  font-weight: 500;
}
#whatsappXatDrawer .wa-buit {
  text-align: center;
  color: #9ca3af;
  margin: auto;
  padding: 24px;
}
#whatsappXatDrawer .wa-footer {
  background: #fff;
  padding: 10px 14px 12px;
  flex-shrink: 0;
  border-top: 1px solid #e5e7eb;
}
#whatsappXatDrawer .wa-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}
#whatsappXatDrawer .wa-input-row textarea,
#whatsappXatDrawer .wa-input-row select {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 9px 14px;
  font-size: 14px;
  line-height: 1.4;
  resize: none;
  font-family: inherit;
  box-sizing: border-box;
  background: #fff;
  color: #1a1a1a;
  transition: border-color 0.15s;
}
#whatsappXatDrawer .wa-input-row textarea:focus,
#whatsappXatDrawer .wa-input-row select:focus {
  outline: none;
  border-color: #075e54;
}
#whatsappXatDrawer .wa-input-row textarea {
  height: 40px;
  min-height: 40px;
  max-height: 40px;
}
#whatsappXatDrawer .wa-envia-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #075e54;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
#whatsappXatDrawer .wa-envia-btn i {
  color: #fff;
  --fa-primary-color: #fff;
  --fa-secondary-color: #fff;
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: .55;
}
#whatsappXatDrawer .wa-envia-btn:hover {
  background: #128c7e;
}
#whatsappXatDrawer .wa-clip-btn {
  width: 36px;
  height: 40px;
  background: transparent;
  border: none;
  color: #6b7280;
  font-size: 16px;
  cursor: pointer;
  border-radius: 8px;
  flex-shrink: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#whatsappXatDrawer .wa-clip-btn:hover {
  background: #f3f4f6;
  color: #075e54;
}
#whatsappXatDrawer .wa-fitxer-preview {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #1a1a1a;
}
#whatsappXatDrawer .wa-fitxer-preview button {
  background: none;
  border: none;
  color: #c00;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  margin-left: auto;
}
#whatsappXatDrawer .wa-aviso {
  color: #c00;
  text-align: center;
  padding: 8px;
  font-size: 13px;
}
#whatsappXatDrawer .wa-aviso-24h {
  color: #6b7280;
  font-size: 12px;
  margin-bottom: 8px;
}

#waBotoFlotant {
  position: fixed;
  bottom: 56px;
  right: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25d366;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 26px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 8999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
}
#waBotoFlotant:hover {
  background: #128c7e;
  transform: scale(1.08);
}
#waBotoFlotant .wa-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #e53935;
  color: #fff;
  border-radius: 50%;
  min-width: 18px;
  height: 18px;
  padding: 0 3px;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

/* Badge de no llegits a la icona de WhatsApp del menú principal */
.btn-mostra-wa {
  cursor: pointer;
}

.wa-badge-no-llegits {
  position: absolute;
  top: -6px;
  right: -8px;
  background: #e53935;
  color: #fff;
  border-radius: 10px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.wa-badge-no-llegits[hidden] {
  display: none;
}

.xat-widget,
.xat-reaccions-picker {
  --xat-fons: #fff;
  --xat-fons-2: #f8f9fa;
  --xat-hover: #f1f3f5;
  --xat-bombolla: #f3f4f6;
  --xat-vora: #e5e7eb;
  --xat-text: #1a1a1a;
  --xat-text-2: #374151;
  --xat-text-3: #6b7280;
  --xat-text-4: #9ca3af;
  --xat-cita-fons: #dee3ed;
  --xat-cita-vora: #5e636e;
  --xat-cita-hover: #c9d1e0;
  --xat-accent-text: var(--color1);
  --xat-bombolla-meva: var(--color1);
}

:root.dark :is(.xat-widget, .xat-reaccions-picker) {
  --xat-fons: var(--color-editable);
  --xat-fons-2: var(--color-fons);
  --xat-hover: var(--color-fons-2);
  --xat-bombolla: var(--color-fons-2);
  --xat-vora: var(--color-border);
  --xat-text: var(--color-text);
  --xat-text-2: var(--color-text-2);
  --xat-text-3: var(--color-text-2);
  --xat-text-4: var(--color-text-2);
  --xat-cita-fons: var(--color-fons-pagina);
  --xat-cita-vora: var(--color-text-2);
  --xat-cita-hover: var(--color-fons);
  --xat-accent-text: color-mix(in srgb, var(--color1) 30%, var(--xat-text));
  --xat-bombolla-meva: color-mix(in srgb, var(--color1) 25%, var(--xat-fons));
}

.xat-widget {
  flex: 1;
  display: grid;
  grid-auto-rows: 100%;
}
.xat-widget .xat-missatges {
  display: flex;
  flex-flow: column;
  gap: 1em;
}
.xat-widget .xat-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.xat-widget .xat-escrivint {
  padding: 2px 0.5rem;
  font-size: 12px;
  font-style: italic;
  color: var(--color-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xat-widget .xat-respondre-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  margin: 0 0.5rem 4px;
  background: rgba(0, 0, 0, 0.04);
  border-left: 3px solid var(--color1);
  border-radius: 3px;
  font-size: 12px;
  color: var(--color-text-2);
}
.xat-widget .xat-respondre-banner .xat-respondre-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xat-widget .xat-respondre-banner .xat-respondre-tanca {
  cursor: pointer;
  padding: 2px 4px;
}
.xat-widget .xat-respondre-banner .xat-respondre-tanca:hover {
  color: var(--color1);
}
.xat-widget .xat-edita-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  margin: 0 0.5rem 4px;
  background: rgba(0, 0, 0, 0.04);
  border-left: 3px solid var(--color1);
  border-radius: 3px;
  font-size: 12px;
  color: var(--color-text-2);
}
.xat-widget .xat-edita-banner .xat-edita-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xat-widget .xat-edita-banner .xat-edita-tanca {
  cursor: pointer;
  padding: 2px 4px;
}
.xat-widget .xat-edita-banner .xat-edita-tanca:hover {
  color: var(--color1);
}
.xat-widget .xat-missatges-no-llegits {
  position: absolute;
  color: var(--color-editable);
  background-color: var(--color-fons-modal);
  border-radius: 50%;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xat-widget .xat-input textarea {
  flex: 1;
  width: 90%;
  max-height: 2.5em;
}
.xat-widget .xat-historia {
  padding: 0 0.5rem;
  overflow-y: auto;
  height: 0;
  flex: 1;
  display: flex;
  flex-flow: column;
  gap: 0.25em 0;
}
.xat-widget .xat-historia :not(.xat-missatge-meu) + .xat-missatge-meu, .xat-widget .xat-historia .xat-missatge-meu + :not(.xat-missatge-meu) {
  margin-top: 1rem;
}
.xat-widget .xat-historia .xat-missatge {
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  display: flex;
  flex-flow: column;
  margin-right: auto;
  max-width: 90%;
  background-color: var(--color-fons);
  transition: background-color 0.5s ease-in-out;
  position: relative;
}
.xat-widget .xat-historia .xat-missatge.no-llegit {
  background-color: var(--color-avis);
  color: var(--color-fosc-2);
}
.xat-widget .xat-historia .xat-missatge.no-llegit .hora {
  color: var(--color-fosc-4);
}
.xat-widget .xat-historia .xat-missatge:not(.repetit) {
  margin-top: 0.5em;
}
.xat-widget .xat-historia .xat-missatge .missatge {
  word-break: break-word;
}
.xat-widget .xat-historia .xat-missatge .autor {
  color: var(--xat-autor, var(--color1));
  padding-bottom: 0.1em;
  padding-right: 1em;
}
.xat-widget .xat-historia .xat-missatge .hora {
  padding-left: 1em;
  text-align: right;
  font-size: smaller;
  color: var(--color-text-2);
}
.xat-widget .xat-historia .xat-missatge .hora .xat-editat {
  margin-right: 0.4em;
  font-style: italic;
  cursor: default;
}
.xat-widget .xat-historia .xat-missatge.xat-missatge-meu {
  margin-left: auto;
  margin-right: 0;
  background-color: var(--color-fons-2);
}
.xat-widget .xat-historia .xat-missatge.xat-missatge-meu .autor {
  display: none;
}
.xat-widget .xat-historia .xat-missatge .xat-missatge-toolbar {
  position: absolute;
  top: -14px;
  right: 8px;
  display: none;
  gap: 4px;
  padding: 3px 6px;
  background: var(--xat-fons);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  z-index: 2;
}
.xat-widget .xat-historia .xat-missatge .xat-missatge-toolbar > i {
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text-2);
  padding: 2px 4px;
  border-radius: 50%;
}
.xat-widget .xat-historia .xat-missatge .xat-missatge-toolbar > i:hover {
  color: var(--color1);
  background: rgba(0, 0, 0, 0.05);
}
.xat-widget .xat-historia .xat-missatge:hover .xat-missatge-toolbar {
  display: inline-flex;
}
.xat-widget .xat-historia .xat-missatge .xat-missatge-cita {
  cursor: pointer;
  margin-bottom: 4px;
  padding: 4px 8px;
  border-left: 3px solid var(--xat-cita-vora);
  background: var(--xat-cita-fons);
  border-radius: 3px;
  font-size: 12px;
  color: var(--color-text-2);
  max-height: 3.2em;
  overflow: hidden;
}
.xat-widget .xat-historia .xat-missatge .xat-missatge-cita .text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.xat-widget .xat-historia .xat-missatge .xat-missatge-reel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  background: var(--xat-cita-fons);
  color: var(--color-text-2);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}
.xat-widget .xat-historia .xat-missatge .xat-missatge-reel:hover {
  background: var(--xat-cita-hover);
  color: var(--color1);
}
.xat-widget .xat-historia .xat-missatge .xat-missatge-reel > i {
  font-size: 13px;
}
.xat-widget .xat-historia .xat-missatge .xat-missatge-reel .xat-missatge-reel-count {
  font-weight: 600;
}
.xat-widget .xat-historia .xat-missatge {
  /* Icona reel: paleta marró + groc, aplicada arreu */
}
.xat-widget .xat-historia .xat-missatge .xat-btn-reel.fa-reel,
.xat-widget .xat-historia .xat-missatge .xat-missatge-reel > i.fa-reel {
  --fa-primary-color: rgb(124, 45, 18);
  --fa-secondary-color: rgb(255, 210, 81);
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: 1;
}
.xat-widget .xat-historia .xat-missatge .xat-reaccions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.xat-widget .xat-historia .xat-missatge .xat-reaccions .xat-reaccio {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  cursor: pointer;
  line-height: 1;
  color: var(--color-text-2);
}
.xat-widget .xat-historia .xat-missatge .xat-reaccions .xat-reaccio i {
  font-size: 16px;
}
.xat-widget .xat-historia .xat-missatge .xat-reaccions .xat-reaccio:hover .xat-reaccio-count {
  color: var(--color1);
}
.xat-widget .xat-historia .xat-missatge .xat-reaccions .xat-reaccio.xat-reaccio-meva .xat-reaccio-count {
  color: var(--xat-accent-text);
  font-weight: 700;
}
.xat-widget .xat-historia .xat-missatge.xat-missatge-destacat {
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.55);
}
.xat-widget .xat-historia.xat-tipus-bisabis .xat-missatge .autor {
  display: none;
}
.xat-widget .xat-titol {
  position: relative;
  display: flex;
  flex-flow: wrap;
  align-items: center;
  gap: 0 0.5rem;
}
.xat-widget .xat-titol > *:nth-child(2) {
  flex: 1;
}
.xat-widget .xat-titol .xat-sala-usuaris {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  max-width: 320px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px 0;
  display: none;
  flex-direction: column;
  background-color: var(--color-editable);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  z-index: 5;
  font-size: 13px;
}
.xat-widget .xat-titol .xat-sala-usuaris.xat-sala-usuaris-visible {
  display: flex;
}
.xat-widget .xat-titol .xat-sala-usuari {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  cursor: pointer;
  color: var(--color-text-2);
  list-style: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xat-widget .xat-titol .xat-sala-usuari:hover {
  background: var(--color-hover);
}
.xat-widget .xat-titol .xat-sala-usuari.xat-connectat {
  color: var(--color-text);
}
.xat-widget .xat-titol .xat-sala-usuari .xat-avatar-petit {
  position: relative;
  width: 28px;
  height: 28px;
  font-size: 11px;
  flex-shrink: 0;
}
.xat-widget .xat-titol .xat-sala-usuari .xat-avatar-petit .xat-presence-dot {
  display: block;
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #9ca3af;
  border: 2px solid var(--xat-fons);
  box-sizing: border-box;
}
.xat-widget .xat-titol .xat-sala-usuari.xat-connectat .xat-presence-dot {
  background: #10b981;
}
.xat-widget .xat-titol .xat-sala-usuari .xat-sala-usuari-nom {
  overflow: hidden;
  text-overflow: ellipsis;
}
.xat-widget .xat-titol .xat-btn-usuaris-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.xat-widget .xat-titol .xat-btn-usuaris {
  cursor: pointer;
}
.xat-widget .xat-titol .xat-btn-usuaris-count {
  background: var(--color1);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  padding: 1px 6px;
  border-radius: 9px;
  pointer-events: none;
}
.xat-widget .xat-titol .btn-xat-sala .autor {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Amaga el card del widget al panell de principal — el xat només viu al drawer flotant.
   El widget segueix carregant-se (per la JS, socket, drawer) però no es renderitza visualment. */
[data-id-widget^=widget_xat_] {
  display: none !important;
}

.xat-widget .xat-flotant-header,
.xat-widget .xat-tabs {
  display: none;
}
.xat-widget .xat-avatar {
  display: none;
}
.xat-widget .xat-data-separador {
  display: none;
}
.xat-widget .xat-color-dot {
  display: none;
}

.xat-widget.xat-flotant {
  position: fixed;
  bottom: 0;
  right: 0;
  top: auto;
  width: 380px;
  max-width: 100vw;
  height: 600px;
  max-height: 100vh;
  background: var(--xat-fons);
  color: var(--xat-text);
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.12), 0 -2px 12px rgba(0, 0, 0, 0.04);
  border-top-left-radius: 12px;
}
.xat-widget.xat-flotant.xat-flotant-esquerra {
  right: auto;
  left: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 12px;
}
.xat-widget.xat-flotant {
  z-index: 9000;
  display: flex;
  flex-direction: column;
  padding-bottom: 0 !important;
  overflow: hidden;
  animation: xatFlotantEntrada 0.25s ease;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.xat-widget.xat-flotant .xat-flotant-header {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color1);
  color: #fff;
  padding: 12px 16px;
  flex-shrink: 0;
}
.xat-widget.xat-flotant .xat-flotant-header .xat-flotant-titol {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.xat-widget.xat-flotant .xat-flotant-header .xat-flotant-close,
.xat-widget.xat-flotant .xat-flotant-header .xat-flotant-mou {
  cursor: pointer;
  font-size: 16px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
}
.xat-widget.xat-flotant .xat-flotant-header .xat-flotant-close:hover,
.xat-widget.xat-flotant .xat-flotant-header .xat-flotant-mou:hover {
  background: rgba(255, 255, 255, 0.25);
}
.xat-widget.xat-flotant .xat-flotant-header .xat-flotant-mou {
  font-size: 14px;
}
.xat-widget.xat-flotant .xat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 12px;
  background: var(--xat-fons-2);
  border-bottom: 1px solid var(--xat-vora);
  flex-shrink: 0;
}
.xat-widget.xat-flotant .xat-tabs .xat-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--xat-fons);
  border: 1px solid var(--xat-vora);
  border-radius: 14px;
  padding: 3px 8px 3px 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  max-width: 160px;
  color: var(--xat-text-2);
  transition: background 0.15s, border-color 0.15s;
}
.xat-widget.xat-flotant .xat-tabs .xat-tab:hover {
  background: var(--xat-hover);
}
.xat-widget.xat-flotant .xat-tabs .xat-tab .xat-tab-nom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xat-widget.xat-flotant .xat-tabs .xat-tab .xat-tab-tanca {
  font-size: 11px;
  color: var(--xat-text-4);
  padding: 2px 4px;
  border-radius: 50%;
}
.xat-widget.xat-flotant .xat-tabs .xat-tab .xat-tab-tanca:hover {
  color: var(--xat-text);
  background: rgba(0, 0, 0, 0.08);
}
.xat-widget.xat-flotant .xat-tabs .xat-tab .xat-tab-no-llegits {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--color1);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.xat-widget.xat-flotant .xat-tabs .xat-tab.actiu {
  background: var(--color1);
  border-color: var(--color1);
  color: #fff;
}
.xat-widget.xat-flotant .xat-tabs .xat-tab.actiu .xat-tab-nom {
  color: #fff !important;
}
.xat-widget.xat-flotant .xat-tabs .xat-tab.actiu .xat-tab-tanca {
  color: rgba(255, 255, 255, 0.85);
}
.xat-widget.xat-flotant .xat-tabs .xat-tab.xat-tab-llista, .xat-widget.xat-flotant .xat-tabs .xat-tab.xat-tab-llista-arxivades, .xat-widget.xat-flotant .xat-tabs .xat-tab.xat-tab-nou-grup {
  padding: 3px 10px;
}
.xat-widget.xat-flotant .xat-tabs .xat-tab.xat-tab-llista .xat-tab-tanca, .xat-widget.xat-flotant .xat-tabs .xat-tab.xat-tab-llista-arxivades .xat-tab-tanca, .xat-widget.xat-flotant .xat-tabs .xat-tab.xat-tab-nou-grup .xat-tab-tanca {
  display: none;
}
.xat-widget.xat-flotant {
  /* Avatars circulars amb inicials */
}
.xat-widget.xat-flotant .xat-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  font-family: inherit;
  background: linear-gradient(135deg, var(--color1), color-mix(in srgb, var(--color1), white 18%));
  flex: 0 0 auto;
  line-height: 1;
  box-sizing: border-box;
}
.xat-widget.xat-flotant .xat-avatar-llista {
  width: 44px;
  height: 44px;
  font-size: 15px;
}
.xat-widget.xat-flotant .xat-avatar-petit {
  width: 32px;
  height: 32px;
  font-size: 12px;
}
.xat-widget.xat-flotant {
  /* Llista de sales */
}
.xat-widget.xat-flotant .xat-sales,
.xat-widget.xat-flotant .xat-missatges {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.xat-widget.xat-flotant .xat-sales {
  background: var(--xat-fons-2);
  padding: 4px 0;
}
.xat-widget.xat-flotant .xat-sales > header.titolApartat {
  display: none;
}
.xat-widget.xat-flotant .xat-sales .xat-sala-reel-icona {
  font-size: 12px;
  margin-right: 4px;
  vertical-align: middle;
  --fa-primary-color: rgb(124, 45, 18);
  --fa-secondary-color: rgb(255, 210, 81);
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: 1;
}
.xat-widget.xat-flotant .xat-sales .btn-xat-sala {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas: "foto titol hora" "foto subtitol subtitol";
  gap: 2px 12px;
  align-items: center;
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-radius: 0;
  border-right: 3px solid transparent;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}
.xat-widget.xat-flotant .xat-sales .btn-xat-sala:hover {
  background: var(--xat-hover);
}
.xat-widget.xat-flotant .xat-sales .btn-xat-sala .marc-foto {
  grid-area: foto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: visible;
  background: transparent;
  position: static;
}
.xat-widget.xat-flotant .xat-sales .btn-xat-sala .marc-foto img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}
.xat-widget.xat-flotant .xat-sales .btn-xat-sala .titol {
  grid-area: titol;
  font-size: 14px;
  font-weight: 600;
  color: var(--xat-text) !important;
  overflow: hidden;
  align-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.xat-widget.xat-flotant .xat-sales .btn-xat-sala .titol .xat-color-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.xat-widget.xat-flotant .xat-sales .btn-xat-sala .titol .xat-nom-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.xat-widget.xat-flotant .xat-sales .btn-xat-sala .subtitol {
  grid-area: subtitol;
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 13px;
  color: var(--xat-text-3);
  overflow: hidden;
}
.xat-widget.xat-flotant .xat-sales .btn-xat-sala .subtitol .autor {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xat-widget.xat-flotant .xat-sales .btn-xat-sala .subtitol time {
  display: none;
}
.xat-widget.xat-flotant .xat-sales .btn-xat-sala > time,
.xat-widget.xat-flotant .xat-sales .btn-xat-sala .subtitol + time,
.xat-widget.xat-flotant .xat-sales .btn-xat-sala > .subtitol time[data-call=calendar] { /* default time goes inside subtitol */ }
.xat-widget.xat-flotant .xat-sales .btn-xat-sala {
  /* Hora alineada al cantó superior dret de la targeta */
}
.xat-widget.xat-flotant .xat-sales .btn-xat-sala time[data-call=calendar] {
  grid-area: hora;
  font-size: 12px;
  color: var(--xat-text-3);
  white-space: nowrap;
  align-self: end;
}
.xat-widget.xat-flotant .xat-sales .btn-xat-sala .xat-missatges-no-llegits {
  position: absolute;
  right: 14px;
  bottom: 10px;
  left: auto;
  top: auto;
  width: auto;
  height: 18px;
  min-width: 20px;
  padding: 0 7px;
  border-radius: 10px;
  background: var(--color1);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xat-widget.xat-flotant {
  /* Vista conversa */
}
.xat-widget.xat-flotant .xat-missatges {
  display: flex;
  flex-direction: column;
}
.xat-widget.xat-flotant .xat-missatges[hidden] {
  display: none;
}
.xat-widget.xat-flotant .xat-missatges .xat-titol {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--xat-fons);
  border-bottom: 1px solid var(--xat-vora);
  font-size: 15px;
  font-weight: 600;
  color: var(--xat-text) !important;
}
.xat-widget.xat-flotant .xat-missatges .xat-titol > i.btn-mostra-sales {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--xat-text-3);
  cursor: pointer;
}
.xat-widget.xat-flotant .xat-missatges .xat-titol > i.btn-mostra-sales:hover {
  background: var(--xat-bombolla);
  color: var(--xat-text);
}
.xat-widget.xat-flotant .xat-missatges .xat-titol > span:not(.xat-avatar) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xat-widget.xat-flotant .xat-missatges .xat-titol > i.btn-func {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--xat-text-3);
  cursor: pointer;
}
.xat-widget.xat-flotant .xat-missatges .xat-titol > i.btn-func:hover {
  background: var(--xat-bombolla);
  color: var(--xat-text);
}
.xat-widget.xat-flotant .xat-missatges .xat-historia {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--xat-fons);
}
.xat-widget.xat-flotant .xat-missatges .xat-data-separador {
  display: flex;
  justify-content: center;
  margin: 8px 0;
}
.xat-widget.xat-flotant .xat-missatges .xat-data-separador span {
  background: var(--xat-fons);
  border: 1px solid var(--xat-vora);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--xat-text-3);
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge {
  display: flex;
  flex-direction: column;
  max-width: 78%;
  background: var(--xat-bombolla);
  border: none !important;
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  padding: 8px 12px 6px;
  color: var(--xat-text);
  align-self: flex-start;
  box-shadow: none;
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge .autor {
  font-size: 12px;
  font-weight: 600;
  color: var(--xat-autor, var(--xat-text-2));
  margin-bottom: 2px;
}
:root.dark .xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge .autor {
  color: color-mix(in srgb, var(--xat-autor, var(--xat-text-2)) 30%, var(--xat-text));
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge .missatge {
  font-size: 14px;
  line-height: 1.45;
  word-wrap: break-word;
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge .missatge a {
  color: var(--xat-accent-text);
  text-decoration: underline;
  word-break: break-all;
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge .hora {
  font-size: 11px;
  color: var(--xat-text-4);
  margin-top: 2px;
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge .hora .data {
  display: none;
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge .xat-fitxer-imatge {
  display: block;
  margin: 0;
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge .xat-fitxer-imatge img {
  max-width: 240px;
  max-height: 240px;
  border-radius: 12px;
  object-fit: cover;
  display: block;
  cursor: pointer;
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge.xat-nomes-fitxer {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  max-width: none;
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge.xat-nomes-fitxer .autor {
  display: none;
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge.xat-nomes-fitxer .missatge {
  display: none;
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge.xat-nomes-fitxer .hora {
  position: absolute;
  right: 8px;
  bottom: 8px;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  font-weight: 500;
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge.xat-nomes-fitxer {
  position: relative;
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge.xat-nomes-fitxer .xat-fitxer-imatge img {
  max-width: 260px;
  max-height: 320px;
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge .xat-fitxer-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 4px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  font-size: 13px;
  max-width: 100%;
  min-width: 0;
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge .xat-fitxer-link i.fa-file {
  color: var(--color1);
  font-size: 18px;
  flex-shrink: 0;
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge .xat-fitxer-link .nom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge .xat-fitxer-link .mida {
  color: var(--xat-text-3);
  font-size: 11px;
  flex-shrink: 0;
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge .xat-fitxer-link:hover {
  background: rgba(0, 0, 0, 0.08);
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge .xat-enllac {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 2px;
  padding: 6px 10px;
  border-left: 3px solid var(--color1);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.04);
  color: inherit;
  text-decoration: none;
  font-size: 13px;
  max-width: 320px;
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge .xat-enllac .xat-enllac-lloc {
  color: var(--color1);
  font-weight: 600;
  font-size: 12px;
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge .xat-enllac .xat-enllac-titol {
  font-weight: 600;
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge .xat-enllac .xat-enllac-desc {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge .xat-enllac .xat-enllac-imatge {
  display: block;
  margin-top: 4px;
  max-width: 100%;
  max-height: 240px;
  border-radius: 6px;
  object-fit: cover;
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge .xat-enllac:hover {
  background: rgba(0, 0, 0, 0.08);
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge.xat-missatge-meu .xat-enllac {
  background: rgba(255, 255, 255, 0.15);
  border-left-color: #fff;
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge.xat-missatge-meu .xat-enllac .xat-enllac-lloc {
  color: #fff;
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge.xat-missatge-meu .xat-enllac:hover {
  background: rgba(255, 255, 255, 0.25);
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge.xat-missatge-meu {
  background: var(--xat-bombolla-meva);
  color: #fff;
  align-self: flex-end;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 4px;
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge.xat-missatge-meu .autor {
  display: none;
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge.xat-missatge-meu .missatge a {
  color: rgba(255, 255, 255, 0.85);
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge.xat-missatge-meu .hora {
  color: rgba(255, 255, 255, 0.75);
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge.xat-missatge-meu .xat-reaccions .xat-reaccio,
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge.xat-missatge-meu .xat-reaccions .xat-reaccio.xat-reaccio-meva .xat-reaccio-count {
  color: inherit;
}
:root.dark .xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge.xat-missatge-meu {
  color: var(--xat-text);
}
:root.dark .xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge.xat-missatge-meu .missatge a {
  color: var(--xat-text);
}
:root.dark .xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge.xat-missatge-meu .hora {
  color: var(--xat-text-2);
}
:root.dark .xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge.xat-missatge-meu .xat-fitxer-link {
  background: rgba(0, 0, 0, 0.2);
}
:root.dark .xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge.xat-missatge-meu .xat-fitxer-link .mida {
  color: var(--xat-text-2);
}
:root.dark .xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge.xat-missatge-meu .xat-fitxer-link:hover {
  background: rgba(0, 0, 0, 0.3);
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge.xat-missatge-meu .xat-fitxer-link {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge.xat-missatge-meu .xat-fitxer-link i.fa-file {
  color: #fff;
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge.xat-missatge-meu .xat-fitxer-link .mida {
  color: rgba(255, 255, 255, 0.8);
}
.xat-widget.xat-flotant .xat-missatges .xat-historia .xat-missatge.xat-missatge-meu .xat-fitxer-link:hover {
  background: rgba(255, 255, 255, 0.28);
}
.xat-widget.xat-flotant .xat-missatges {
  /* Drag&drop visual a la conversa */
}
.xat-widget.xat-flotant .xat-missatges.xat-dragover {
  outline: 2px dashed var(--color1);
  outline-offset: -8px;
  background: color-mix(in srgb, var(--color1), var(--xat-fons) 92%);
}
.xat-widget.xat-flotant .xat-missatges .xat-input {
  flex-shrink: 0;
  padding: 10px 14px 12px;
  background: var(--xat-fons);
  border-top: 1px solid var(--xat-vora);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  align-items: stretch;
}
.xat-widget.xat-flotant .xat-missatges .xat-input .xat-fitxers-preview {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  max-height: 100px;
  overflow-y: auto;
  width: 100%;
  box-sizing: border-box;
}
.xat-widget.xat-flotant .xat-missatges .xat-input .xat-fitxers-preview[hidden] {
  display: none;
}
.xat-widget.xat-flotant .xat-missatges .xat-input .xat-fitxer-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--xat-bombolla);
  border: 1px solid var(--xat-vora);
  border-radius: 8px;
  padding: 4px 6px 4px 8px;
  font-size: 12px;
  max-width: 100%;
  position: relative;
}
.xat-widget.xat-flotant .xat-missatges .xat-input .xat-fitxer-chip img {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}
.xat-widget.xat-flotant .xat-missatges .xat-input .xat-fitxer-chip .nom {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--xat-text);
}
.xat-widget.xat-flotant .xat-missatges .xat-input .xat-fitxer-chip .mida {
  color: var(--xat-text-3);
  font-size: 11px;
}
.xat-widget.xat-flotant .xat-missatges .xat-input .xat-fitxer-chip i.fa-file {
  color: var(--color1);
}
.xat-widget.xat-flotant .xat-missatges .xat-input .xat-fitxer-chip .xat-elimina {
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -6px;
  right: -6px;
}
.xat-widget.xat-flotant .xat-missatges .xat-input .xat-fitxer-chip .xat-elimina:hover {
  background: rgba(0, 0, 0, 0.8);
}
.xat-widget.xat-flotant .xat-missatges .xat-input .xat-input-fila {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  width: 100%;
  box-sizing: border-box;
}
.xat-widget.xat-flotant .xat-missatges .xat-input .xat-clip-btn {
  width: 36px;
  height: 40px;
  background: transparent;
  border: none;
  color: var(--xat-text-3);
  cursor: pointer;
  font-size: 16px;
  border-radius: 8px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.xat-widget.xat-flotant .xat-missatges .xat-input .xat-clip-btn:hover {
  background: var(--xat-bombolla);
  color: var(--color1);
}
.xat-widget.xat-flotant .xat-missatges .xat-input textarea.textNouMissatge {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
  border: 1px solid var(--xat-vora);
  border-radius: 12px;
  padding: 9px 14px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.4;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  resize: none;
  transition: border-color 0.15s;
  background: var(--xat-fons);
  color: var(--xat-text);
  box-sizing: border-box;
}
.xat-widget.xat-flotant .xat-missatges .xat-input textarea.textNouMissatge:focus {
  outline: none;
  border-color: var(--color1);
}
.xat-widget.xat-flotant .xat-missatges .xat-input .btn-send {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color1);
  color: #fff;
  border-radius: 8px;
  font-size: 16px !important;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
  --fa-primary-color: #fff;
  --fa-secondary-color: #fff;
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: .55;
}
.xat-widget.xat-flotant .xat-missatges .xat-input .btn-send:hover {
  background: color-mix(in srgb, var(--color1), black 10%);
}
.xat-widget.xat-flotant .xat-missatges .xat-input .btn-send::before {
  color: #fff;
}

@keyframes xatFlotantEntrada {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
/* Cerca dins la llista de sales (només flotant) */
.xat-widget .xat-cerca-box {
  display: none;
}

.xat-widget.xat-flotant .xat-cerca-box {
  display: block;
  padding: 8px 12px;
  background: var(--xat-fons-2);
  border-bottom: 1px solid var(--xat-vora);
  flex-shrink: 0;
}

.xat-widget.xat-flotant .xat-cerca-input {
  width: 100%;
  padding: 6px 12px 6px 32px;
  border: 1px solid var(--xat-vora);
  border-radius: 8px;
  font-size: 13px;
  background: var(--xat-fons) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 10px center;
  transition: border-color 0.15s;
  font-family: inherit;
  color: var(--xat-text);
}

.xat-widget.xat-flotant .xat-cerca-input:focus {
  outline: none;
  border-color: var(--color1);
}

/* Panell "Nou grup de xat" (només flotant) */
.xat-widget.xat-flotant .xat-nou-grup {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.xat-widget.xat-flotant .xat-nou-grup[hidden] {
  display: none;
}
.xat-widget.xat-flotant .xat-nou-grup .xat-nou-grup-form {
  padding: 12px;
  background: var(--xat-fons-2);
  border-bottom: 1px solid var(--xat-vora);
  flex-shrink: 0;
}
.xat-widget.xat-flotant .xat-nou-grup .xat-nou-grup-nom {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--xat-vora);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--xat-text);
  background: var(--xat-fons);
  transition: border-color 0.15s;
}
.xat-widget.xat-flotant .xat-nou-grup .xat-nou-grup-nom:focus {
  outline: none;
  border-color: var(--color1);
}
.xat-widget.xat-flotant .xat-nou-grup .xat-nou-grup-cerca-box {
  margin-top: 8px;
}
.xat-widget.xat-flotant .xat-nou-grup .xat-nou-grup-cerca {
  width: 100%;
  padding: 6px 12px 6px 32px;
  border: 1px solid var(--xat-vora);
  border-radius: 8px;
  font-size: 13px;
  background: var(--xat-fons) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 10px center;
  transition: border-color 0.15s;
  font-family: inherit;
  color: var(--xat-text);
}
.xat-widget.xat-flotant .xat-nou-grup .xat-nou-grup-cerca:focus {
  outline: none;
  border-color: var(--color1);
}
.xat-widget.xat-flotant .xat-nou-grup .xat-nou-grup-usuaris {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: var(--xat-fons);
}
.xat-widget.xat-flotant .xat-nou-grup .xat-nou-grup-usuari {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.15s;
}
.xat-widget.xat-flotant .xat-nou-grup .xat-nou-grup-usuari:hover {
  background: var(--xat-hover);
}
.xat-widget.xat-flotant .xat-nou-grup .xat-nou-grup-usuari .xat-nou-grup-check {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--color1);
  cursor: pointer;
}
.xat-widget.xat-flotant .xat-nou-grup .xat-nou-grup-usuari .xat-avatar {
  display: inline-flex;
}
.xat-widget.xat-flotant .xat-nou-grup .xat-nou-grup-usuari .xat-nou-grup-usuari-nom {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: var(--xat-text);
}
.xat-widget.xat-flotant .xat-nou-grup .xat-nou-grup-buit {
  padding: 24px 16px;
  text-align: center;
  color: var(--xat-text-3);
  font-size: 13px;
}
.xat-widget.xat-flotant .xat-nou-grup .xat-nou-grup-accions {
  padding: 10px 12px;
  background: var(--xat-fons-2);
  border-top: 1px solid var(--xat-vora);
  flex-shrink: 0;
}
.xat-widget.xat-flotant .xat-nou-grup .xat-nou-grup-crea {
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 8px;
  background: var(--color1);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s;
}
.xat-widget.xat-flotant .xat-nou-grup .xat-nou-grup-crea:hover:not(:disabled) {
  opacity: 0.9;
}
.xat-widget.xat-flotant .xat-nou-grup .xat-nou-grup-crea:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Presència al header de la conversa */
.xat-widget .xat-presence-dot {
  display: none;
}

.xat-widget.xat-flotant .xat-avatar-petit {
  position: relative;
}

.xat-widget.xat-flotant .xat-avatar-petit .xat-presence-dot {
  display: block;
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #9ca3af; /* gris = offline per defecte */
  border: 2px solid var(--xat-fons);
  box-sizing: border-box;
}

.xat-widget.xat-flotant .xat-titol:has(.xat-sala-usuaris .xat-connectat) .xat-presence-dot {
  background: #10b981; /* verd = algú connectat */
}

/* Hora a la dreta de l'item de la llista (cel·la 'hora' del grid) */
.xat-widget.xat-flotant .xat-sales .btn-xat-sala > time[data-call=calendar] {
  grid-area: hora;
  font-size: 12px;
  color: var(--xat-text-3);
  white-space: nowrap;
  align-self: end;
}

/* Picker flotant de reaccions: s'injecta a document.body, fora del .xat-widget */
.xat-reaccions-picker {
  display: flex;
  gap: 10px;
  padding: 6px 10px;
  background: var(--xat-fons);
  border: 1px solid var(--xat-vora);
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10000;
}
.xat-reaccions-picker .xat-reaccions-picker-btn {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  transition: transform 0.1s;
}
.xat-reaccions-picker .xat-reaccions-picker-btn:hover {
  transform: scale(1.25);
}

/* Emoji estil duotone (marró + groc) per a icones fa-face-* del xat */
.xat-icona-emoji {
  --fa-primary-color: rgb(30, 30, 27);
  --fa-primary-opacity: 0.61;
  --fa-secondary-color: rgb(255, 210, 81);
  --fa-secondary-opacity: 1;
}

/* Animació de pop quan apareix una reacció nova */
@keyframes xat-reaccio-pop {
  0% {
    transform: scale(0.6);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}
.xat-reaccio.xat-reaccio-nova {
  animation: xat-reaccio-pop 760ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Emoji que vola cap amunt sobre el missatge quan arriba una reacció nova */
@keyframes xat-reaccio-volant {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.6);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -8px) scale(1.4);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -70px) scale(1.6);
  }
}
.xat-reaccio-volant {
  position: fixed;
  z-index: 10001;
  pointer-events: none;
  font-size: 32px;
  animation: xat-reaccio-volant 1800ms ease-out forwards;
}

.xat-widget .xat-historia .xat-missatge.xat-amb-lectura {
  margin-bottom: 12px;
}

.xat-widget .xat-historia .xat-missatge .xat-lectura {
  position: absolute;
  right: -6px;
  bottom: -12px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--xat-fons);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  font-size: 11px;
  line-height: 14px;
  white-space: nowrap;
  color: #b0bac0;
}
.xat-widget .xat-historia .xat-missatge .xat-lectura[data-estat=tots] {
  color: #1d9bf0;
}

.menuFiltre {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10000;
  pointer-events: none;
}
.menuFiltre[hidden] {
  display: none;
}
.menuFiltre .menuFiltre-input {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: min(360px, 80vw);
  padding: 0.5rem 0.75rem;
  background: var(--color-fons);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.menuFiltre .menuFiltre-input > i {
  opacity: 0.6;
}
.menuFiltre .menuFiltre-input > i.menuFiltre-tanca {
  cursor: pointer;
}
.menuFiltre .menuFiltre-input input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--color-text);
  font-size: 1rem;
  padding: 0;
}

/* ===== Darreres accions (timeline) — només pestanya general de persona ===== */
/* Scoped sota .persones-historia perquè no afecti la taula d'història compartida */
.persones-historia {
  /* colors dels punts: locals, no es filtren a cap altra vista */
  --dda-alta: #54AE32;
  --dda-com: #4E93C6;
  --dda-sys: #A2A7AE;
}
.persones-historia .ddaBody {
  padding: 6px 6px 10px;
}
.persones-historia .ddaBuit {
  padding: 1.5em 1em;
  text-align: center;
  color: var(--color-text-2);
  font-size: 0.9rem;
}
.persones-historia .tl {
  list-style: none;
  position: relative;
  margin: 8px 12px 6px 2px;
  padding: 0 0 0 22px;
}
.persones-historia .tl::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 10px;
  width: 2px;
  background: var(--color-border);
}
.persones-historia .ev {
  position: relative;
  padding: 9px 0;
}
.persones-historia .ev .dot {
  position: absolute;
  left: -21px;
  top: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2.5px solid var(--color-fons);
}
.persones-historia .ev .dot.alta {
  background: var(--dda-alta);
}
.persones-historia .ev .dot.com {
  background: var(--dda-com);
}
.persones-historia .ev .dot.sys {
  background: var(--dda-sys);
}
.persones-historia .ev .hd {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  row-gap: 4px;
}
.persones-historia .ev .ty {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--color-text);
}
.persones-historia .ev .ty .tySub {
  font-weight: 600;
  color: var(--color-text-2);
}
.persones-historia .ev .ch {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-2);
  background: var(--color-fons-2);
  padding: 2px 8px;
  border-radius: 999px;
}
.persones-historia .ev .src {
  font-size: 13px;
  color: var(--color-text-2);
  margin-top: 2px;
}
.persones-historia .ev .srcCom .assumpte {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.persones-historia .ev .tmRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 3px;
}
.persones-historia .ev .tm {
  font-size: 11.5px;
  color: var(--color-text-2);
}
.persones-historia .ev .btnObrir {
  flex: none;
  cursor: pointer;
  color: var(--color-text-2);
  font-size: 13px;
  padding: 2px;
}
.persones-historia .ev .btnObrir:hover {
  color: var(--apl-primary);
}
.persones-historia .more {
  display: block;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--apl-primary-deep);
  padding: 9px;
  text-decoration: none;
}
.persones-historia .more:hover {
  background: var(--color-fons-2);
}

/* ---------- Apartat de missatges de persona: files tipus «alert» ---------- */
.persones-missatges .titolApartat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.persones-missatges .titolApartat > i.fa-envelope {
  color: var(--apl-primary);
  opacity: 0.85;
}
.persones-missatges .titolApartat .ct {
  font-size: 0.78em;
  font-weight: 800;
  line-height: 1.7;
  color: var(--apl-primary-deep);
  background-color: var(--apl-primary-soft);
  padding: 0 0.5rem;
  border-radius: 999px;
}
.persones-missatges .titolApartat .btn-call.fa-plus {
  margin-left: auto;
  cursor: pointer;
  color: var(--color-text-2);
  opacity: 0.7;
}
.persones-missatges .titolApartat .btn-call.fa-plus:hover {
  opacity: 1;
  color: var(--apl-primary);
}
.persones-missatges .missatges-llista {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  margin-top: 15px;
}
.persones-missatges .missatge-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: 6px;
  background-color: var(--color-fons-2);
}
.persones-missatges .missatge-alert > i {
  flex: none;
  margin-top: 0.1rem;
  color: var(--color-text-2);
  opacity: 0.8;
}
.persones-missatges .missatge-alert .tx {
  flex: 1 1 auto;
  min-width: 0;
}
.persones-missatges .missatge-alert .missatge-text {
  color: var(--color-text);
  word-break: break-word;
}
.persones-missatges .missatge-alert .missatge-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.15rem;
  font-size: 0.8em;
  color: var(--color-text-2);
  opacity: 0.85;
}
.persones-missatges .missatge-alert .missatge-accions {
  flex: none;
  display: flex;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.12s;
}
.persones-missatges .missatge-alert .missatge-accions i {
  cursor: pointer;
  color: var(--color-text-2);
}
.persones-missatges .missatge-alert .missatge-accions i:hover {
  color: var(--apl-primary);
}
.persones-missatges .missatge-alert .missatge-accions i.fa-trash:hover {
  color: var(--color-perill);
}
.persones-missatges .missatge-alert:hover .missatge-accions {
  opacity: 1;
}
.persones-missatges .missatge-alert.il {
  cursor: pointer;
}
.persones-missatges .missatge-alert.es-incidencia {
  border-left-color: var(--color-perill);
  background-color: color-mix(in srgb, var(--color-perill) 8%, var(--color-fons));
}
.persones-missatges .missatge-alert.es-incidencia > i {
  color: var(--color-perill);
  opacity: 1;
}
.persones-missatges .missatge-alert.es-avis {
  border-left-color: var(--color-avis);
  background-color: color-mix(in srgb, var(--color-avis) 14%, var(--color-fons));
}
.persones-missatges .missatge-alert.es-avis > i {
  color: var(--color-avis);
  opacity: 1;
}
.persones-missatges .missatges-buit {
  padding: 0.5rem 0.2rem;
  font-size: 0.85em;
  color: var(--color-text-2);
  opacity: 0.7;
}

.comPreviewBody {
  max-height: 300px;
  overflow: auto;
  font-size: 12px;
  background: #fff;
  color: #1a1a1a;
}
.comPreviewBody img {
  max-width: 100%;
  height: auto;
}
.comPreviewBody table {
  max-width: 100%;
}

/* personaBorsaIdiomes: idioma i nivell més amples, columnes de detall (Entén /
   Escriu / Parla / Llegeix / V / W) més estretes. */
#personaBorsaIdiomes .table-div > * > div:nth-child(1),
#personaBorsaIdiomes .table-div > * > div:nth-child(2) {
  width: 13em;
  min-width: 9em;
}
#personaBorsaIdiomes .table-div > * > div:nth-child(1) select,
#personaBorsaIdiomes .table-div > * > div:nth-child(2) select {
  width: 100%;
}
#personaBorsaIdiomes .table-div > * > div:nth-child(n+3):nth-child(-n+8) {
  width: 2.6em;
  min-width: 2.6em;
  text-align: center;
}

/* ===== Casella de signatura RGPD bloquejada + selector de vies (#229024) =====
   Quan la instància té tauleta i la signatura encara no hi és, la casella no es
   pot marcar (el submit sobreescriuria el que la tauleta desa entremig, #177576).
   Aquí es fa que ho SEMBLI, i que clicar-hi obri la llista de vies. */
/* ⚠️ El `pointer-events: none` no és estètica: un `input disabled` no dispara cap
   event de ratolí —ni als seus pares—, de manera que sense això el clic damunt de
   la casella no arriba al `<label>` i el selector no s'obriria mai. */
.lopd-chk-bloquejat {
  pointer-events: none;
  opacity: 0.6;
  filter: grayscale(1);
}

.lopd-obre-fila {
  cursor: pointer;
}

.lopd-obre {
  background: none;
  border: 0;
  padding: 0 0.2em;
  margin: 0;
  cursor: pointer;
  color: var(--color-text-2);
  font-size: 0.8em;
  line-height: 1;
}

/* ⚠️ Fixa, no absoluta: el `<div>` que embolcalla els camps de la fitxa té
   `overflow: auto` i retallava la llista a la primera fila, sense cap error. Les
   coordenades les posa `lopdViesSitua()`, i com que una caixa fixa es quedaria
   surant en desplaçar la pàgina, el scroll la tanca. */
.lopd-vies {
  position: fixed;
  z-index: 1000;
  min-width: 20em;
  max-width: min(30em, 90vw);
  padding: 0.35em;
  background: var(--color-fons-pagina);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  text-align: left;
}

.lopd-vies-titol {
  padding: 0.25em 0.5em 0.45em;
  color: var(--color-text-2);
  font-size: 0.85rem;
}

.lopd-via {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  width: 100%;
  padding: 0.45em 0.5em;
  background: none;
  border: 0;
  border-radius: 4px;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}
.lopd-via:hover, .lopd-via:focus-visible {
  background: var(--color-hover);
}
/* ⚠️ `--color1` és el color de marca de la instància i NO canvia en fosc
   (a l'SPIN és #222): aquí hi ha d'anar un color semàntic. */
.lopd-via > i {
  width: 1.2em;
  margin-top: 0.15em;
  color: var(--color-text-2);
  text-align: center;
}
.lopd-via strong {
  display: block;
  font-weight: 600;
}
.lopd-via small {
  display: block;
  color: var(--color-text-2);
}

.xarxesSocials {
  display: grid;
  grid-template-columns: max-content minmax(0, 2fr) minmax(0, 1fr);
  gap: 0.25em 0.5em;
  align-items: center;
}

[data-clipboard] {
  cursor: pointer;
}
[data-clipboard] i {
  pointer-events: none;
}

#panelBorsaCandiatures .apuntsCandidaturaAuto {
  margin-top: 0.4em;
}
#panelBorsaCandiatures .apuntsCandidaturaAuto td, #panelBorsaCandiatures .apuntsCandidaturaAuto th {
  border-bottom: 1px solid var(--color-border);
}
#panelBorsaCandiatures .apuntsCandidaturaAuto .apuntCandidaturaFila {
  cursor: pointer;
}
#panelBorsaCandiatures .apuntsCandidaturaAuto .apuntCandidaturaFila:hover {
  background-color: var(--color-hover);
}
#panelBorsaCandiatures .apuntsCandidaturaAuto .apuntCandidaturaFila .fa-pen-swirl {
  opacity: 0.35;
}
#panelBorsaCandiatures .apuntsCandidaturaAuto .apuntCandidaturaFila:hover .fa-pen-swirl {
  opacity: 1;
}
#panelBorsaCandiatures .apuntsCandidaturaAuto .estatApunt {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-weight: 500;
  white-space: nowrap;
}
#panelBorsaCandiatures .apuntsCandidaturaAuto .estatApunt.esActiu {
  color: var(--color-correcte);
}
#panelBorsaCandiatures .apuntsCandidaturaAuto .estatApunt.esInactiu {
  color: var(--color-text-2);
}
#panelBorsaCandiatures .apuntsCandidaturaAuto .estatApunt.esOcult {
  color: var(--color-perill);
  margin-left: 0.6em;
}

:root.dark #panelBorsaCandiatures .apuntsCandidaturaAuto .estatApunt.esActiu {
  color: #4caf50;
}

:root {
  --brand: var(--color1, #85b17c);
  --brand-2: var(--color2, #a87cb1);
  --accent: var(--brand);
  --accent-fg: oklch(0.99 0 0);
  --accent-soft: color-mix(in srgb, var(--brand) 9%, oklch(1 0 0));
  --bg: oklch(0.975 0.003 250);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.968 0.004 250);
  --border: oklch(0.912 0.005 250);
  --border-soft: oklch(0.94 0.004 250);
  --border-strong: oklch(0.84 0.007 250);
  --fg: oklch(0.27 0.012 255);
  --fg-muted: oklch(0.52 0.012 255);
  --fg-faint: oklch(0.64 0.01 255);
  --pending: oklch(0.66 0.12 68);
  --pending-soft: oklch(0.955 0.045 75);
  --pending-fg: oklch(0.42 0.09 60);
  --ok: oklch(0.56 0.1 158);
  --ok-soft: oklch(0.95 0.038 158);
  --ok-fg: oklch(0.4 0.08 158);
  --danger: oklch(0.56 0.15 27);
  --danger-soft: oklch(0.955 0.035 27);
  --danger-fg: oklch(0.46 0.12 27);
  --applied: var(--brand-2);
  --applied-soft: color-mix(in srgb, var(--brand-2) 8%, oklch(1 0 0));
  --applied-fg: color-mix(in srgb, var(--brand-2) 75%, oklch(0.2 0 0));
  --shadow: 0 1px 2px oklch(0.3 0.02 255 / 0.06), 0 4px 14px oklch(0.3 0.02 255 / 0.05);
  --shadow-lg: 0 10px 40px oklch(0.3 0.02 255 / 0.12);
  --r-btn: 9px;
  --r-card: 12px;
  --r-seg: 8px;
  --r-pill: 20px;
  --h-topbar: 56px;
  --h-input: 40px;
  --h-btn: 36px;
  --h-btn-sm: 33px;
}

html.dark {
  --accent: color-mix(in srgb, var(--brand) 62%, oklch(0.98 0 0));
  --accent-fg: oklch(0.17 0.02 248);
  --accent-soft: color-mix(in srgb, var(--brand) 32%, oklch(0.225 0.008 255));
  --bg: oklch(0.185 0.006 255);
  --surface: oklch(0.225 0.008 255);
  --surface-2: oklch(0.255 0.009 255);
  --border: oklch(0.315 0.01 255);
  --border-soft: oklch(0.29 0.01 255);
  --border-strong: oklch(0.4 0.012 255);
  --fg: oklch(0.93 0.006 255);
  --fg-muted: oklch(0.72 0.01 255);
  --fg-faint: oklch(0.58 0.01 255);
  --pending: oklch(0.78 0.12 75);
  --pending-soft: oklch(0.33 0.06 72);
  --pending-fg: oklch(0.86 0.09 78);
  --ok: oklch(0.74 0.1 158);
  --ok-soft: oklch(0.31 0.05 158);
  --ok-fg: oklch(0.85 0.09 158);
  --danger: oklch(0.68 0.14 27);
  --danger-soft: oklch(0.33 0.06 27);
  --danger-fg: oklch(0.85 0.1 27);
  --applied: color-mix(in srgb, var(--brand-2) 60%, oklch(0.98 0 0));
  --applied-soft: color-mix(in srgb, var(--brand-2) 30%, oklch(0.225 0.008 255));
  --applied-fg: color-mix(in srgb, var(--brand-2) 30%, oklch(0.95 0 0));
  --shadow: 0 1px 2px oklch(0 0 0 / 0.3), 0 4px 14px oklch(0 0 0 / 0.28);
  --shadow-lg: 0 10px 40px oklch(0 0 0 / 0.5);
}

.asst-app {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 62px);
  overflow: hidden;
  font-family: "IBM Plex Sans", var(--font-family), sans-serif;
  font-size: 14px;
  color: var(--fg);
  background: var(--bg);
}

.asst-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--h-topbar);
  padding: 0 16px;
  flex: 0 0 auto;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.asst-topbar__marca {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 7px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 13px;
}

.asst-topbar-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asst-grow {
  flex: 1 1 auto;
}

.asst-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 22px 22px 60px;
}

.asst-content {
  max-width: 1280px;
  margin: 0 auto;
}

.asst-content--ample {
  max-width: none;
}

.asst-cols {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
}

.asst-col,
.asst-pila {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.asst-cols > .asst-nav {
  grid-column: 1/-1;
}

@media (max-width: 900px) {
  .asst-cols {
    grid-template-columns: 1fr;
  }
}
#dades.asst-main {
  grid-template-columns: minmax(0, 1fr);
}

.asst-main > .asst-app {
  min-width: 0;
}

@media (max-width: 720px) {
  .asst-main .asst-topbar {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--h-topbar);
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .asst-main .asst-body {
    padding: 16px 16px 60px;
  }
  .asst-main .asst-cap {
    flex-wrap: wrap;
  }
  .asst-main .asst-camps {
    grid-template-columns: 1fr;
  }
  .asst-main .asst-titol {
    font-size: 22px;
  }
}
.asst-cap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.asst-titol {
  margin: 0;
  flex: 1 1 auto;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.asst-comptador {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  white-space: nowrap;
}

.asst-passes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 7px 10px;
  flex: 0 0 auto;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.asst-pas {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 0;
  min-width: 9em;
  max-width: 240px;
  padding: 9px 13px;
  border-radius: var(--r-btn);
  color: var(--fg-muted);
  text-decoration: none;
  cursor: default;
}

a.asst-pas {
  color: var(--fg);
  cursor: pointer;
}
a.asst-pas:hover {
  background: var(--surface-2);
}

.asst-pas__num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--surface);
  color: var(--fg-muted);
  border: 2px solid var(--border);
  font-size: 12px;
  font-weight: 700;
}

.asst-pas__titol {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.15;
}

.asst-pas.is-actiu {
  background: var(--accent-soft);
  color: var(--fg);
}
.asst-pas.is-actiu .asst-pas__num {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}

.asst-pas.is-fet .asst-pas__num {
  background: var(--ok);
  color: var(--surface);
  border-color: var(--ok);
  font-size: 11px;
}

.asst-pas.is-bloquejat {
  color: var(--fg-faint);
}
.asst-pas.is-bloquejat .asst-pas__num {
  color: var(--fg-faint);
  border-style: dashed;
}

.asst-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.asst-nav--net {
  padding-top: 0;
  border-top: 0;
}

.asst-nav__ajuda {
  flex: 1;
  font-size: 12px;
  color: var(--fg-faint);
}

.asst-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--h-btn);
  margin: 0;
  padding: 0 15px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.asst-btn:hover {
  background: var(--surface-2);
}

.asst-btn--primari {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}
.asst-btn--primari:hover {
  background: color-mix(in srgb, var(--accent) 88%, black);
  border-color: color-mix(in srgb, var(--accent) 88%, black);
}

.asst-btn--fantasma {
  border-color: transparent;
  background: transparent;
  color: var(--fg-muted);
}
.asst-btn--fantasma:hover {
  background: var(--surface-2);
  color: var(--fg);
}

.asst-btn--perill:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger-fg);
}

.asst-btn--suggerit {
  height: var(--h-btn-sm);
  padding: 0 13px;
  border-style: dashed;
  border-color: var(--border-strong);
  background: transparent;
  color: var(--fg-muted);
}
.asst-btn--suggerit:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.asst-btn--petit {
  height: var(--h-btn-sm);
  padding: 0 13px;
}

.asst-btn:disabled {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--fg-faint);
  cursor: not-allowed;
}

.asst-btn:focus:not(.maximized),
.asst-btn-icona:focus:not(.maximized),
.asst-seg__btn:focus:not(.maximized),
.asst-toggle:focus:not(.maximized) {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

.asst-btn:focus:not(.maximized),
.asst-btn-icona:focus:not(.maximized) {
  background-color: var(--surface);
}

.asst-btn--primari:focus:not(.maximized) {
  background-color: var(--accent);
}

.asst-btn--fantasma:focus:not(.maximized),
.asst-btn--suggerit:focus:not(.maximized) {
  background-color: transparent;
}

.asst-seg__btn:focus:not(.maximized) {
  background-color: transparent;
}

.asst-seg__btn.is-on:focus:not(.maximized) {
  background-color: var(--surface);
}

.asst-toggle:focus:not(.maximized) {
  background-color: var(--border-strong);
}

.asst-toggle.is-on:focus:not(.maximized) {
  background-color: var(--accent);
}

.asst-btn-icona {
  display: grid;
  place-items: center;
  width: var(--h-btn);
  height: var(--h-btn);
  flex: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--fg-muted);
  cursor: pointer;
}
.asst-btn-icona:hover {
  background: var(--surface-2);
  color: var(--fg);
}

.asst-menu {
  position: relative;
  flex: none;
}

.asst-menu__llista {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: asstFadeUp 0.15s ease-out;
}
.asst-menu__llista[hidden] {
  display: none;
}

.asst-menu__item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  height: var(--h-btn-sm);
  margin: 0;
  padding: 0 10px;
  border: none;
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.asst-menu__item:hover {
  background: var(--surface-2);
}
.asst-menu__item > i {
  width: 16px;
  flex: none;
  color: var(--fg-muted);
  text-align: center;
}

.asst-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}

.asst-card__h {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
}

.asst-card__h--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.asst-card__titol {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.asst-card__sub {
  font-size: 12px;
  color: var(--fg-muted);
}

.asst-card__b {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
}

.asst-card__b--estret {
  gap: 14px;
  padding: 15px;
}

.asst-card > .asst-taula {
  border: 0;
  border-radius: 0 0 var(--r-card) var(--r-card);
  box-shadow: none;
}

.asst-label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
}

.asst-input,
.asst-textarea,
select.asst-input {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 14px;
}

.asst-input {
  height: var(--h-input);
  padding: 0 12px;
}

.asst-textarea {
  min-height: 76px;
  padding: 11px 12px;
  line-height: 1.5;
  resize: vertical;
}

.asst-input:focus,
.asst-textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.asst-input.is-error {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 15%, transparent);
}

.asst-card :invalid:not(.invalid),
.asst-alta :invalid:not(.invalid),
.asst-taula :invalid:not(.invalid) {
  border-color: var(--border) !important;
  color: var(--fg) !important;
}
.asst-card :user-invalid:not(.invalid),
.asst-alta :user-invalid:not(.invalid),
.asst-taula :user-invalid:not(.invalid) {
  border-color: var(--danger) !important;
  color: var(--fg) !important;
}

.asst-input[type=number] {
  width: 100% !important;
}

input.asst-input[placeholder="dd/mm/aaaa"] {
  width: 100%;
  max-width: 100%;
}

.asst-card__b .ts-wrapper {
  width: 100% !important;
}

.asst-color input[type=color] {
  width: 46px;
  height: var(--h-input);
  margin: 0;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--surface);
  cursor: pointer;
}
.asst-color input[type=color]::-webkit-color-swatch-wrapper {
  padding: 0;
}
.asst-color input[type=color]::-webkit-color-swatch {
  border: 0;
  border-radius: 6px;
}

.asst-ajuda {
  margin-top: 6px;
  max-width: 46ch;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--fg-faint);
}

.asst-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--danger-fg);
}

.asst-camps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 16px;
}

.asst-camps > .asst-camp--full {
  grid-column: 1/-1;
}

.asst-seg {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.asst-seg__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 7px 16px;
  border: none;
  border-radius: var(--r-seg);
  background: transparent;
  color: var(--fg-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.asst-seg__btn.is-on {
  background: var(--surface);
  color: var(--fg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.asst-inset {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.asst-inset__main {
  flex: 1;
}

.asst-inset__titol {
  font-size: 13px;
  font-weight: 600;
}

.asst-inset__desc {
  max-width: 46ch;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg-muted);
}

.asst-insets {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.asst-insets > * {
  flex: 1 1 280px;
}

.asst-toggle {
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--r-pill);
  background: var(--border-strong);
  cursor: pointer;
  transition: background 0.15s;
}
.asst-toggle.is-on {
  background: var(--accent);
}
.asst-toggle.is-on .asst-toggle__knob {
  left: 21px;
}

.asst-toggle__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: left 0.15s;
}

.asst-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--fg-muted);
  text-decoration: none;
  white-space: nowrap;
}
.asst-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.asst-pill--ok {
  background: var(--ok-soft);
  color: var(--ok-fg);
}

.asst-pill--pendent {
  background: var(--pending-soft);
  color: var(--pending-fg);
}

.asst-pill--perill {
  background: var(--danger-soft);
  color: var(--danger-fg);
}

.asst-pill--aplicat {
  background: var(--applied-soft);
  color: var(--applied-fg);
}

.asst-codi {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
}

.asst-vincle-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.asst-vincle {
  flex: 0 1 auto;
  width: 340px;
  max-width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px 3px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: var(--r-pill);
  background: var(--accent-soft);
}
.asst-vincle > .ts-wrapper,
.asst-vincle > select {
  flex: 1 1 auto;
  min-width: 0;
}
.asst-vincle .ts-wrapper,
.asst-vincle .ts-control {
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.asst-vincle .ts-control > .item {
  padding-left: 0 !important;
}
.asst-vincle > select {
  height: 26px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--fg);
}

.asst-obre {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.asst-obre.amagat {
  display: none;
}

.asst-vincula {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--h-btn-sm);
  margin: 0;
  padding: 0 13px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--fg-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.asst-vincula:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.asst-taula {
  --asst-cols: 1fr;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.asst-taula__tr {
  display: grid;
  grid-template-columns: var(--asst-cols);
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-soft);
  min-width: 0;
}
.asst-taula__tr:last-child {
  border-bottom: 0;
}
.asst-taula__tr:hover:not(.asst-taula__th) {
  background: var(--surface-2);
}
.asst-taula__tr > * {
  min-width: 0;
}
.asst-taula__tr select,
.asst-taula__tr textarea,
.asst-taula__tr input[type=text],
.asst-taula__tr input[type=number],
.asst-taula__tr .ts-wrapper {
  width: 100% !important;
  margin: 0;
}
.asst-taula__tr select,
.asst-taula__tr textarea,
.asst-taula__tr input[type=text],
.asst-taula__tr input[type=number] {
  padding: 5px 8px;
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  background: var(--surface);
  color: var(--fg);
}

.asst-taula__th {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.asst-taula__nou {
  background: var(--accent-soft);
  border-bottom: 1px solid var(--border);
}

.asst-taula__tr.es-baixa {
  opacity: 0.55;
}

.asst-cel-nom {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.asst-icona {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--r-btn);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 14px;
}

.asst-nom {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.asst-nom__linia {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.asst-nom__linia b {
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asst-nom small {
  font-size: 12px;
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asst-cel-muted {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asst-camp--span3 {
  grid-column: span 3;
  margin-top: 0;
}

.asst-drag {
  color: var(--fg-faint);
  cursor: grab;
  touch-action: none;
}

.asst-afegeix {
  color: var(--accent);
  cursor: pointer;
}
.asst-afegeix:hover {
  color: color-mix(in srgb, var(--accent) 80%, black);
}

.asst-esborra {
  color: var(--fg-faint);
  cursor: pointer;
}
.asst-esborra:hover {
  color: var(--danger);
}

.asst-alta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 14px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  background: var(--surface-2);
}
.asst-alta select,
.asst-alta input[type=text],
.asst-alta .ts-wrapper {
  width: 100% !important;
  margin: 0;
}

.asst-alta__camp {
  flex: 1 1 12em;
  min-width: 0;
}

.asst-alta__camp--auto {
  flex: 0 0 auto;
}

.asst-alta__chk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--h-input);
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
  cursor: pointer;
}

.asst-mostra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.asst-mostra__tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 18px;
}

.asst-mostra__txt {
  min-width: 0;
}

.asst-mostra__nom {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asst-mostra__desc {
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asst-resum {
  padding: 6px 15px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}

.asst-resum__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-soft);
}
.asst-resum__fila:last-child {
  border-bottom: 0;
}

.asst-resum__k {
  font-size: 12px;
  color: var(--fg-muted);
}

.asst-resum__v {
  font-size: 12px;
  font-weight: 600;
  text-align: right;
}

.asst-resum__v--ok {
  color: var(--ok-fg);
}

.asst-resum__v--muted {
  color: var(--fg-muted);
}

.asst-fites {
  margin: 0;
  padding: 6px 0;
  list-style: none;
}

.asst-fita + .asst-fita {
  border-top: 1px solid var(--border-soft);
}

.asst-fita__enllac {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  text-decoration: none;
}
.asst-fita__enllac:hover {
  background: var(--surface-2);
}

.asst-fita__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 700;
}

.asst-fita__txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 0;
  min-width: 0;
}

.asst-fita__titol {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg);
}

.asst-fita__desc {
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg-muted);
}

.asst-fita__estat {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
  white-space: nowrap;
}

.asst-fita--ok .asst-fita__num {
  background: var(--ok);
  border-color: var(--ok);
  color: var(--surface);
}
.asst-fita--ok .asst-fita__estat {
  color: var(--ok-fg);
}

.asst-fita--pendent .asst-fita__num {
  border-color: var(--pending);
  color: var(--pending-fg);
}
.asst-fita--pendent .asst-fita__estat {
  color: var(--pending-fg);
}

.asst-fita--error {
  background: var(--danger-soft);
}
.asst-fita--error .asst-fita__num {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--surface);
}
.asst-fita--error .asst-fita__estat {
  color: var(--danger-fg);
}

.asst-fita--opcional .asst-fita__num,
.asst-fita--info .asst-fita__num {
  border-style: dashed;
}

@media (max-width: 720px) {
  .asst-fita__enllac {
    flex-wrap: wrap;
  }
  .asst-fita__estat {
    flex-basis: 100%;
    padding-left: 42px;
  }
}
.asst-buit {
  padding: 34px 24px;
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--fg-muted);
}

.asst-buit__icona {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0 auto 12px;
  border-radius: var(--r-card);
  background: var(--surface-2);
  color: var(--fg-faint);
  font-size: 16px;
}

.asst-avis {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  font-size: 12px;
  line-height: 1.45;
}

.asst-avis--error {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger-fg);
}

.asst-avis--ok {
  border-color: var(--ok);
  background: var(--ok-soft);
  color: var(--ok-fg);
}

.asst-avis__titol {
  font-size: 13px;
  font-weight: 700;
}

.asst-llista {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.55;
}
.asst-llista > li + li {
  margin-top: 4px;
}

ol.asst-llista {
  list-style: decimal;
}

ul.asst-llista {
  list-style: disc;
}

.asst-avis .asst-llista {
  margin-top: 4px;
  font-size: inherit;
}

.asst-dialeg {
  width: min(440px, 100vw - 32px);
  inset: 0;
  margin: auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--fg);
  font-family: "IBM Plex Sans", var(--font-family), sans-serif;
  font-size: 14px;
  box-shadow: var(--shadow-lg);
}
.asst-dialeg::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.asst-dialeg__cap {
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
}

.asst-dialeg__cos {
  padding: 18px;
}

.asst-dialeg__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.asst-dialeg__llista {
  margin: 12px 0 0;
  padding: 8px 14px;
  max-height: 190px;
  overflow: auto;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 12px;
  color: var(--fg-muted);
}
.asst-dialeg__llista li {
  padding: 4px 0;
}
.asst-dialeg__llista li + li {
  border-top: 1px solid var(--border-soft);
}

.asst-dialeg__peu {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}

.asst-skeleton {
  border-radius: var(--r-pill);
  background: var(--surface-2);
  animation: asstShimmer 1.4s ease-in-out infinite;
}

@keyframes asstShimmer {
  0%, 100% {
    opacity: 0.45;
  }
  50% {
    opacity: 0.9;
  }
}
@keyframes asstFadeUp {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
a.asst-btn:link, a.asst-btn:visited, a.asst-btn:hover {
  color: var(--fg);
}
a.asst-btn--fantasma:link, a.asst-btn--fantasma:visited {
  color: var(--fg-muted);
}
a.asst-btn--fantasma:hover {
  color: var(--fg);
}
a.asst-btn--suggerit:link, a.asst-btn--suggerit:visited {
  color: var(--fg-muted);
}
a.asst-btn--suggerit:hover {
  color: var(--accent);
}
a.asst-btn--primari:link, a.asst-btn--primari:visited, a.asst-btn--primari:hover {
  color: var(--accent-fg);
}
a.asst-pas:link, a.asst-pas:visited, a.asst-pas:hover {
  color: var(--fg);
}
a.asst-seg__btn:link, a.asst-seg__btn:visited, a.asst-seg__btn:hover {
  color: var(--fg-muted);
}
a.asst-seg__btn.is-on:link, a.asst-seg__btn.is-on:visited, a.asst-seg__btn.is-on:hover {
  color: var(--fg);
}
a.asst-pill:link, a.asst-pill:visited, a.asst-pill:hover {
  color: var(--fg-muted);
}
a.asst-pill--ok:link, a.asst-pill--ok:visited, a.asst-pill--ok:hover {
  color: var(--ok-fg);
}
a.asst-pill--pendent:link, a.asst-pill--pendent:visited, a.asst-pill--pendent:hover {
  color: var(--pending-fg);
}
a.asst-pill--perill:link, a.asst-pill--perill:visited, a.asst-pill--perill:hover {
  color: var(--danger-fg);
}
a.asst-pill--aplicat:link, a.asst-pill--aplicat:visited, a.asst-pill--aplicat:hover {
  color: var(--applied-fg);
}
a.asst-vincula:link, a.asst-vincula:visited {
  color: var(--fg-muted);
}
a.asst-vincula:hover {
  color: var(--accent);
}
a.asst-obre:link, a.asst-obre:visited, a.asst-obre:hover {
  color: var(--accent);
}
a.asst-obre:hover {
  text-decoration: underline;
}
a.asst-btn-icona:link, a.asst-btn-icona:visited {
  color: var(--fg-muted);
}
a.asst-btn-icona:hover {
  color: var(--fg);
}
a.asst-menu__item:link, a.asst-menu__item:visited, a.asst-menu__item:hover {
  color: var(--fg);
}
a.asst-fita__enllac:link, a.asst-fita__enllac:visited, a.asst-fita__enllac:hover {
  color: var(--fg);
}

.asst-app [onclick].asst-btn:hover, .asst-app [onclick].asst-btn-icona:hover {
  color: var(--fg);
}
.asst-app [onclick].asst-menu__item:hover {
  color: var(--fg);
}
.asst-app [onclick].asst-btn--fantasma:hover {
  color: var(--fg);
}
.asst-app [onclick].asst-btn--suggerit:hover {
  color: var(--accent);
}
.asst-app [onclick].asst-btn--primari:hover {
  color: var(--accent-fg);
}
.asst-app [onclick].asst-btn--perill:hover {
  color: var(--danger-fg);
}
.asst-app [onclick].asst-pas:hover, .asst-app [onclick].asst-taula__tr:hover {
  color: var(--fg);
}
.asst-app [onclick].asst-seg__btn:hover {
  color: var(--fg-muted);
}
.asst-app [onclick].asst-seg__btn.is-on:hover {
  color: var(--fg);
}
.asst-app [onclick].asst-pill:hover {
  color: var(--fg-muted);
}
.asst-app [onclick].asst-pill--ok:hover {
  color: var(--ok-fg);
}
.asst-app [onclick].asst-pill--pendent:hover {
  color: var(--pending-fg);
}
.asst-app [onclick].asst-pill--perill:hover {
  color: var(--danger-fg);
}
.asst-app [onclick].asst-pill--aplicat:hover {
  color: var(--applied-fg);
}

#dades:has(> .foap-app) {
  grid-template-columns: minmax(0, 1fr);
}

.foap-fitxa {
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.foap-fitxa--imatge {
  display: grid;
  grid-template-columns: minmax(0, 220px) 1fr;
  gap: 16px;
}

.foap-fitxa__imatge {
  width: 100%;
  height: 100%;
  min-height: 140px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface-2);
}

[data-foap-vista][hidden] {
  display: none;
}

.foap-itinerari {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
}

.foap-itinerari > div {
  width: 180px;
}

.foap-itinerari__nota {
  margin: 12px 0 0;
  font-size: 13px;
}

.foap-itinerari ~ .asst-avis {
  margin-top: 12px;
}

.foap-moduls__h,
.foap-formacio__h {
  flex-wrap: wrap;
  gap: 10px 16px;
}

.foap-moduls__titol,
.foap-formacio__titol {
  display: flex;
  flex-direction: column;
  flex: 1 1 320px;
  gap: 4px;
}

.foap-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.foap-c0 {
  --foap-c: oklch(0.62 0.13 250);
}

.foap-c1 {
  --foap-c: oklch(0.64 0.13 160);
}

.foap-c2 {
  --foap-c: oklch(0.68 0.14 70);
}

.foap-c3 {
  --foap-c: oklch(0.6 0.15 20);
}

.foap-c4 {
  --foap-c: oklch(0.58 0.13 300);
}

.foap-c5 {
  --foap-c: oklch(0.64 0.11 200);
}

.foap-c6 {
  --foap-c: oklch(0.62 0.13 120);
}

.foap-c7 {
  --foap-c: oklch(0.6 0.12 340);
}

.foap-c-pfe {
  --foap-c: oklch(0.55 0.02 250);
}

.foap-c-formacio {
  --foap-c: oklch(0.7 0.12 50);
}

.foap-color {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 3px;
  background: var(--foap-c);
  vertical-align: baseline;
}

.foap-color--festiu {
  border: 1px solid var(--border);
  background: repeating-linear-gradient(135deg, transparent 0 2px, var(--border) 2px 3px);
}

.foap-llegenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 14px;
  padding: 0;
  font-size: 12.5px;
  list-style: none;
}

.foap-cal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 18px;
}

.foap-cal__mes {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  table-layout: fixed;
  font-size: 12px;
}

.foap-cal__mes caption {
  padding-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}

.foap-cal__mes th {
  padding: 2px 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-muted);
}

.foap-cal__dia {
  height: 46px;
  padding: 2px 3px;
  border-radius: 6px;
  vertical-align: top;
  overflow: hidden;
}

.foap-cal__dia.es-lectiu {
  background: var(--surface-2);
}

.foap-cal__dia.es-festiu {
  background: repeating-linear-gradient(135deg, transparent 0 4px, var(--border-soft) 4px 6px);
  color: var(--fg-faint);
}

.foap-cal__dia.es-fora {
  color: var(--fg-faint);
}

.foap-cal__dia.es-festiu-formacio {
  background: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--foap-c) 28%, transparent) 4px 6px);
  color: var(--fg-faint);
  --foap-c: oklch(0.7 0.12 50);
}

.foap-cal__festiu {
  display: block;
  font-size: 9.5px;
  line-height: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.foap-cal__num {
  display: block;
  font-size: 11px;
  color: var(--fg-muted);
}

.foap-cal__u {
  display: block;
  margin-top: 2px;
  padding: 0 3px;
  border-left: 3px solid var(--foap-c);
  border-radius: 3px;
  background: color-mix(in srgb, var(--foap-c) 18%, var(--surface));
  color: var(--fg);
  font-size: 10.5px;
  line-height: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.foap-cal__mf {
  display: block;
  color: var(--fg-muted);
  font-size: 9.5px;
  line-height: 12px;
}

.foap-festius {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.foap-festius__nota,
.foap-festius__buit {
  margin: 2px 0 8px;
  font-size: 12.5px;
}

.foap-festius__llista {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 10px;
  padding: 0;
  font-size: 13px;
  list-style: none;
}

.foap-festius__llista li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.foap-festius__treu {
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--fg-muted);
  font-size: 13px;
  cursor: pointer;
}

.foap-festius__treu:hover {
  color: var(--fg);
}

.foap-itinerari > .foap-festius__motiu {
  width: 240px;
}

.foap-pla {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 14px;
  font-size: 12.5px;
}

.foap-pla__ajuda {
  flex: 1 1 100%;
  margin: 0;
  color: var(--fg-muted);
}

.foap-pla__llista {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.foap-pla__llista li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 2px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-2);
}

.foap-pla__treu {
  padding: 2px 6px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--fg-muted);
  cursor: pointer;
}
.foap-pla__treu:hover {
  background: var(--border-soft);
  color: var(--fg);
}

.foap-pla .asst-avis {
  flex: 1 1 100%;
}

.foap-arrossega {
  cursor: grab;
}

.foap-cal__u.es-planificada {
  box-shadow: inset 0 0 0 1px var(--foap-c);
  font-weight: 600;
}

.es-arrossegant .foap-cal__dia[data-dia] {
  outline: 1px dashed var(--border);
}

.es-arrossegant .foap-cal__dia.es-sobre {
  outline: 2px solid var(--accent);
}

@media (max-width: 700px) {
  .foap-fitxa--imatge {
    grid-template-columns: 1fr;
  }
  .foap-fitxa__imatge {
    max-width: 320px;
    height: auto;
    min-height: 0;
    aspect-ratio: 4/3;
  }
  .foap-itinerari > div {
    flex: 1 1 140px;
    width: auto;
  }
  .foap-formacio__vincle {
    flex-wrap: wrap;
  }
  .foap-formacio__vincle .asst-vincle {
    flex: 1 1 100%;
  }
  .foap-moduls {
    --asst-cols: 7em 1fr 3.5em !important;
  }
  .foap-moduls .foap-moduls__dates {
    grid-column: 2/-1;
  }
  .foap-moduls .asst-taula__th .foap-moduls__dates {
    display: none;
  }
  .foap-cal {
    grid-template-columns: 1fr;
  }
  .foap-cal__dia {
    height: 38px;
  }
  .foap-cal__festiu {
    font-size: 0;
  }
  .foap-cal__u {
    height: 5px;
    padding: 0;
    border-left: 0;
    background: var(--foap-c);
    font-size: 0;
    line-height: 5px;
  }
}
.foap-web-fila {
  align-items: flex-start;
}

.foap-web-llista {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
}

.foap-web-llista .asst-pill {
  white-space: normal;
}

.foap-web-nota {
  margin: 0;
  font-size: 12px;
}

.foap-web-correu summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.foap-web-correu__text {
  max-height: 320px;
  margin-top: 10px;
  padding: 12px 14px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface-2);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.foap-graella {
  overflow: auto;
  max-height: max(320px, 85dvh - 190px);
}
.foap-graella .asst-taula {
  overflow: visible;
  box-sizing: border-box;
  width: 100%;
  min-width: var(--foap-ample-minim, 100%);
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  box-shadow: none;
}
.foap-graella .asst-taula__th {
  position: sticky;
  top: 0;
  z-index: 1;
}
.foap-graella .asst-taula__th > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.foap-aval-cel {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

select.foap-aval {
  min-width: 0;
  height: 30px;
  padding: 0 6px;
  font-size: 13px;
}

select.foap-aval--apte {
  border-color: var(--ok-fg);
  color: var(--ok-fg);
}

select.foap-aval--noApte {
  border-color: var(--danger);
  color: var(--danger-fg);
}

.foap-aval-globalcel {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.foap-aval-doc[hidden] {
  display: none;
}

.pla-num {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
}

.pla-filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
}

.pla-cerca {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 260px;
  min-width: 0;
  height: var(--h-btn);
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--fg-faint);
}
.pla-cerca input {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 13px;
}

.pla-cerca:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.pla-cerca input:focus:not(.maximized) {
  outline: none;
  background-color: transparent;
  box-shadow: none;
}

button.pla-xip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--h-btn);
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--fg-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

button.pla-xip:hover {
  background: var(--surface-2);
}

button.pla-xip.is-on {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--fg);
}

button.pla-xip:focus:not(.maximized) {
  outline: none;
  background-color: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

button.pla-xip.is-on:focus:not(.maximized) {
  background-color: var(--accent-soft);
}

.pla-xip__n {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--fg-muted);
}

.pla-buit__nota {
  margin-top: 8px;
  font-size: 12px;
  color: var(--fg-faint);
}

.pla-titol {
  display: flex;
  align-items: center;
  min-width: 0;
}

.pla-titol__boto {
  max-width: 100%;
  padding: 2px 7px;
  margin: 0 0 0 -8px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: text;
}
.pla-titol__boto:hover {
  border-color: var(--border);
}
.pla-titol__boto:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.pla-titol__camp {
  height: auto;
  padding: 2px 7px;
  margin: 0 0 0 -8px;
  font: inherit;
}

.pla-estat::before {
  background: var(--pla-estat-color, currentColor);
}

button.pla-estat {
  margin: 0;
  border: 1px solid transparent;
  cursor: pointer;
}
button.pla-estat:hover {
  border-color: var(--border-strong);
}
button.pla-estat > i {
  font-size: 10px;
}

button.pla-estat:focus:not(.maximized) {
  outline: none;
  border-color: var(--accent);
  background-color: var(--surface-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

.pla-estat-opcio.is-on {
  background: var(--surface-2);
}

.pla-estat-opcio > .pla-estat-opcio__vist {
  margin-left: auto;
  visibility: hidden;
  color: var(--accent);
}

.pla-estat-opcio.is-on > .pla-estat-opcio__vist {
  visibility: visible;
}

.pla-graella {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.pla-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pla-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.pla-card.es-baixa {
  opacity: 0.55;
}

.pla-card__cap {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.pla-card__nom {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.pla-card__meta {
  font-size: 12px;
  color: var(--fg-muted);
}

.pla-card__peu {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
}

.pla-card__estat {
  margin-left: auto;
}

.pla-barra {
  margin-top: auto;
  overflow: hidden;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-2);
}

.pla-barra__fet {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
}

.pla-cel {
  position: relative;
  display: flex;
}

.pla-cel[hidden] {
  display: none;
}

.pla-cel > .pla-card {
  flex: 1;
  min-width: 0;
}

.pla-cel > .pla-card > .pla-card__cap {
  padding-right: 30px;
}

button.pla-estrella {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 5px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  background: none;
  color: var(--fg-faint);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
button.pla-estrella:hover {
  border-color: var(--border);
  color: var(--accent);
}
button.pla-estrella.is-on {
  color: var(--accent);
}
button.pla-estrella[disabled] {
  opacity: 0.5;
}

button.pla-estrella:focus:not(.maximized) {
  outline: none;
  border-color: var(--accent);
  background-color: transparent;
  box-shadow: none;
}

.asst-btn-icona.pla-estrella-cap.is-on {
  color: var(--accent);
}

.pla-fila {
  cursor: pointer;
}

.pla-venc {
  display: flex;
  flex-direction: column;
  font-size: 13px;
}
.pla-venc small {
  font-size: 11px;
  font-weight: 600;
}
.pla-venc--late small {
  color: var(--danger);
}
.pla-venc--soon small {
  color: var(--pending);
}

.asst-card > .pla-llista {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.pla-alta {
  position: relative;
}

.pla-suggeriments {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  overflow: hidden auto;
  width: min(520px, 100%);
  max-height: 280px;
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
}

.pla-suggeriment {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 9px 14px;
  border: none;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.pla-suggeriment:hover {
  background: var(--surface-2);
}
.pla-suggeriment:disabled {
  opacity: 0.5;
  cursor: default;
}

.pla-suggeriment__nom {
  flex: 1;
  font-weight: 600;
}

.pla-suggeriment__projecte,
.pla-suggeriment__buit {
  color: var(--fg-muted);
  font-size: 12px;
}

.pla-suggeriment__buit {
  margin: 0;
  padding: 12px 14px;
}

.pla-suggeriment__accio {
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.pla-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-card);
  background: var(--surface-2);
  color: var(--fg-muted);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.pla-dropzone:hover {
  color: var(--fg);
}
.pla-dropzone.is-sobre {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--fg);
}
.pla-dropzone.is-pujant {
  border-style: solid;
  opacity: 0.6;
  pointer-events: none;
}
.pla-dropzone i {
  font-size: 18px;
}

.pla-docs__llista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
}

.pla-doc {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  text-decoration: none;
}
.pla-doc:hover {
  background: var(--surface-2);
}

.pla-doc__ext {
  flex: none;
  min-width: 3.4em;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg-faint);
}

.pla-doc__nom {
  flex: 1;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pla-docs-menu {
  position: fixed;
  right: auto;
  z-index: 1000;
}

.pla-doc.is-editant {
  align-items: center;
  background: var(--surface-2);
  cursor: default;
}

.pla-doc__camp {
  flex: 1;
  min-width: 0;
  height: var(--h-btn-sm);
  font-weight: 600;
}

.pla-visor__cap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 18px;
}

.pla-visor__titol {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pla-visor__cos {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  background: var(--surface-2);
}
.pla-visor__cos iframe {
  background: #fff;
}
.pla-visor__cos img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.pla-visor__buit {
  max-width: 32em;
  padding: 24px;
  text-align: center;
}

.pla-docs__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 12px;
}

.pla-docs__ruta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
}

.pla-docs__tros {
  margin: 0;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--fg-muted);
  font: inherit;
  cursor: pointer;
}
.pla-docs__tros:hover {
  background: var(--surface-2);
  color: var(--fg);
}

span.pla-docs__tros {
  color: var(--fg);
  cursor: default;
}
span.pla-docs__tros:hover {
  background: transparent;
}

button.pla-docs__tros:focus:not(.maximized) {
  background-color: transparent;
}

.pla-docs__sep {
  color: var(--fg-faint);
}

.pla-docs__ordre .asst-seg__btn {
  padding: 4px 10px;
  font-size: 12px;
}

.pla-docs__baixes.is-on {
  border-color: var(--accent);
  color: var(--fg);
}

.pla-docs__buit {
  margin: 12px 0 0;
}

.pla-doc--carpeta .pla-doc__ext {
  color: var(--accent);
}
.pla-doc--carpeta .pla-doc__ext i {
  font-size: 14px;
}

.pla-doc.is-sobre,
.pla-docs__tros.is-sobre {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--fg);
}

.pla-doc.is-arrossegant {
  opacity: 0.5;
}

.pla-mou__nom {
  margin-bottom: 12px;
  font-weight: 600;
}

.pla-tauler {
  width: 100%;
}
.pla-tauler > .apartat {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.pla-membres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pla-membre {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  text-decoration: none;
}

.pla-membre__txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.pla-membre__nom {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pla-membre__x {
  flex: none;
  padding: 0 2px;
  border: none;
  background: none;
  color: var(--fg-faint);
  cursor: pointer;
}
.pla-membre__x:hover {
  color: var(--danger);
}
.pla-membre__x:disabled {
  cursor: default;
  opacity: 0.5;
}

.pla-membre__rol {
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  border: none;
  background: none;
  color: var(--fg-muted);
  font: inherit;
  font-size: 12px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.pla-membre__rol:hover {
  color: var(--accent);
  text-decoration: underline;
}
.pla-membre__rol.is-buit {
  font-style: italic;
  opacity: 0.7;
}

.pla-membre__rol-camp {
  width: 12ch;
  min-width: 0;
  max-width: 100%;
  padding: 0 4px;
  font-size: 12px;
}
.pla-membre__rol-camp[hidden] {
  display: none;
}

.pla-avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pla-membre-alta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

.pla-membre-alta__form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.pla-membre-alta__form[hidden] {
  display: none;
}

.pla-convida {
  position: relative;
}

.pla-convida .pla-membre-alta__form {
  flex: 1 1 auto;
}

.pla-convida__camp {
  flex: 0 1 320px;
  width: auto;
  max-width: 100%;
}

.pla-inici {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.pla-inici:hover .asst-topbar-title {
  color: var(--accent);
}

.pla-dades {
  max-width: 860px;
}
.pla-dades[hidden] {
  display: none;
}

.pla-dades__peu {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
}

.pla-dades__org-camp {
  position: relative;
}

.pla-dades__org .pla-membres {
  margin-top: 8px;
}

@media (max-width: 640px) {
  .pla-dades .asst-camps {
    grid-template-columns: 1fr;
  }
}

.pla-copia[hidden] {
  display: none;
}

.pla-copia__camps {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 8px;
}

.pla-copia__check {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding-bottom: 6px;
  font-size: 13px;
}

a.pla-card:link, a.pla-card:visited, a.pla-card:hover {
  color: var(--fg);
}
a.pla-doc:link, a.pla-doc:visited {
  color: var(--fg);
}
a.pla-doc:hover {
  color: var(--accent);
}

/* ------------------------------------------- Contenidors de capacitat --- */
/* #228082. Graella d'equip del planificador: files persones, columnes setmanes.
   Peces pròpies d'aquesta pantalla; la closca, els botons i els xips de filtre
   són els del design system (.asst-*). */
.cnt-barra {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.cnt-xip {
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cnt-xip--ok {
  background: var(--ok-soft);
  color: var(--ok-fg);
}

.cnt-xip--alerta {
  background: var(--danger-soft);
  color: var(--danger-fg);
}

.cnt-card {
  padding: 0;
  overflow: hidden;
}

/* La graella pot ser més ampla que la pantalla: qui es desplaça és ella, no el
   cos de la pàgina. */
.cnt-envolta {
  overflow-x: auto;
}

.cnt-graella {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
}

.cnt-graella th {
  padding: 10px 12px;
  text-align: left;
  vertical-align: bottom;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.cnt-graella th.is-actual {
  background: var(--accent-soft);
}

.cnt-th-persona {
  width: 190px;
}

.cnt-th-num {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
}

.cnt-th-rang {
  display: block;
}

.cnt-graella td {
  padding: 10px 12px;
  vertical-align: top;
  border-bottom: 1px solid var(--border-soft);
}

.cnt-graella tbody tr:last-child td {
  border-bottom: none;
}

.cnt-persona {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cnt-inicials {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--fg-muted);
  border: 1px solid var(--border);
}

.cnt-persona__nom {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
}

/* Cada cel·la és un botó: obre el diàleg d'aquella persona i aquella setmana.
   Es pinta com a contingut, no com a control, perquè la graella es llegeix
   abans que es fa servir. */
.cnt-cella {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 106px;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: var(--r-seg);
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.cnt-cella:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.cnt-pila {
  display: flex;
  height: 26px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
}

.cnt-pila i {
  display: block;
  height: 100%;
  border-right: 1px solid color-mix(in srgb, var(--surface) 35%, transparent);
}

.cnt-pila i:last-child {
  border-right: none;
}

/* El que passa de la capacitat. Ratllat i no un color pla: així es distingeix
   d'un projecte més encara que algú miri la graella en blanc i negre. */
.cnt-sobra {
  background: repeating-linear-gradient(45deg, var(--danger) 0 4px, color-mix(in srgb, var(--danger) 62%, #000) 4px 8px);
}

.cnt-xifra {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

.cnt-xifra b {
  color: var(--fg);
  font-weight: 600;
}

.cnt-punt {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--border-strong);
}

.cnt-cella--just .cnt-punt {
  background: var(--ok);
}

.cnt-cella--ple .cnt-punt {
  background: var(--pending);
}

.cnt-cella--sobre .cnt-punt {
  background: var(--danger);
}

.cnt-cella--sobre .cnt-xifra b {
  color: var(--danger-fg);
}

.cnt-cella--buida .cnt-xifra b {
  color: var(--fg-faint);
}

.cnt-llegenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 12px 16px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--fg-muted);
}

.cnt-llegenda span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.cnt-mostra {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex: 0 0 auto;
}

.cnt-mostra--lliure {
  background: var(--surface);
  border: 1px solid var(--border-strong);
}

/* ------------------------------------------------ Diàleg d'una cel·la --- */
.cnt-dialeg {
  width: min(420px, 94vw);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--shadow-lg);
}

.cnt-dialeg::backdrop {
  background: oklch(0.2 0.02 255 / 0.35);
}

.cnt-dialeg__cap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}

.cnt-dialeg__cos {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cnt-dialeg__blocs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cnt-dialeg__bloc {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-seg);
  background: var(--surface-2);
  font-size: 13px;
}

.cnt-dialeg__nom {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cnt-dialeg__resum {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--fg-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cnt-dialeg__peu {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
}

/* --------------------------- Contenidors: arrossegar les hores i repetir --- */
/* #228082. La cel·la ja no és un botó sinó una zona d'arrossegament: s'estira
   dins de la barra i el tram que es dibuixa són les hores que es proposen. */
.cnt-cella {
  /* Estirar dins de la barra seleccionaria el text de les cel·les del costat. */
  user-select: none;
  -webkit-user-select: none;
}

.cnt-cella:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.cnt-pila {
  /* L'àncora del tram de previsualització, que va absolut a dins. */
  position: relative;
  /* Diu que la barra s'estira, que és el gest que espera la pantalla. */
  cursor: ew-resize;
  /* Sense això, a una pantalla tàctil el gest horitzontal el pren el desplaçament
     de la taula i mai arriba a `pointermove`. */
  touch-action: none;
}

/* El tram que es pinta mentre s'arrossega. Va per damunt dels blocs ja posats,
   perquè el que es tria són hores NOVES sobre el que ja hi ha. */
.cnt-tram {
  position: absolute;
  top: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--accent) 45%, transparent);
  border: 1px solid var(--accent);
  border-radius: 3px;
  pointer-events: none;
}

/* ------------------------------------------------------- Recurrència --- */
.cnt-repeteix {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-seg);
  background: var(--surface-2);
}

.cnt-repeteix__check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

.cnt-repeteix__quantes {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.cnt-repeteix__quantes input {
  width: 72px;
}

/* --------------------------------------------- Color d'un pla (.pla-*) --- */
/* El valor que es desa viu al camp ocult; aquests dos controls l'escriuen. */
.pla-color {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pla-color__tria {
  width: 44px;
  height: var(--h-input);
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--r-seg);
  background: var(--surface);
  cursor: pointer;
}

.pla-color__estat {
  font-size: 12px;
  color: var(--fg-faint);
}

/* El diàleg va CENTRAT a la finestra. `margin: auto` explícit i no heretat: el
   reset del projecte posa `margin: 0` a tot i s'endú el que el navegador dona
   als diàlegs modals, que és justament el que els centra. Sense això el diàleg
   s'obre enganxat a dalt a l'esquerra (position: fixed + inset: 0 sense marge). */
.cnt-dialeg {
  margin: auto;
}

/* Les hores que s'estan seleccionant mentre s'arrossega, a la xifra de la cel·la. */
.cnt-xifra.is-gest {
  /* ⚠️ El pes i el fons, no només el color: `--accent` és el color de marca de la instància i
     n'hi ha que el tenen gris fosc (a dev, #222222), o sigui indistingible del text normal
     justament quan la xifra ha de cridar l'atenció. */
  color: var(--accent);
  font-weight: 700;
  background: var(--accent-soft);
  border-radius: 4px;
  padding: 0 5px;
}

/* El desplegable d'un <dialog> penja del seu wrapper i no del <body> (la top layer del
   diàleg el deixaria per sota): aquí sí que necessita pintar-se per damunt del que té
   a sota dins del mateix diàleg. */
.cnt-dialeg .ts-dropdown {
  z-index: 20;
}


#dades.pl-main {
  display: block;
  padding: 0;
  overflow: hidden;
}

#dades.pl-main > .asst-app {
  height: 100%;
}

body:has(.pl-app:not(.pl-widget)),
.pl-widget {
  --accent: var(--apl-primary, #6b9b58);
  --accent-fg: var(--surface);
  --accent-soft: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

html.dark body:has(.pl-app:not(.pl-widget)),
html.dark .pl-widget {
  --accent: color-mix(in srgb, var(--apl-primary, #6b9b58) 62%, var(--fg));
}

.pl-app {
  --pl-hora: 40px;
  --pl-col: 128px;
  --pl-canal: 54px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.pl-cap {
  flex: 0 0 auto;
  padding: 0 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.pl-cap__fila {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  flex-wrap: wrap;
  padding: 7px 0;
}

.pl-cap__fila--dates {
  min-height: 0;
  padding: 6px 0 7px;
  border-top: 1px solid var(--border-soft);
}

.pl-marca {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 9px;
  background: var(--accent-soft);
  color: color-mix(in srgb, var(--accent) 78%, var(--fg));
  font-size: 12.5px;
}

.pl-titol {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pl-espai {
  flex: 1;
  min-width: 8px;
}

.pl-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 11px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--fg);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.pl-btn:hover {
  background: var(--surface-2);
}
.pl-btn .fa-chevron-down {
  font-size: 9px;
  opacity: 0.5;
}

.pl-btn[disabled] {
  opacity: 0.45;
  cursor: default;
}
.pl-btn[disabled]:hover {
  background: var(--surface);
}

.pl-btn--obert {
  border-color: var(--accent);
}

.pl-btn--icona {
  width: 30px;
  padding: 0;
  justify-content: center;
  color: var(--fg-muted);
}

.pl-btn--actiu {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: color-mix(in srgb, var(--accent) 70%, var(--fg));
}

.pl-btn--neteja {
  border-style: dashed;
  color: var(--fg-muted);
  font-size: 12px;
}
.pl-btn--neteja:hover {
  border-color: var(--danger);
  background: var(--surface);
  color: var(--danger);
}

.pl-cerca {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 11px;
  flex: 0 1 240px;
  min-width: 170px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--surface);
}
.pl-cerca:focus-within {
  border-color: var(--accent);
}
.pl-cerca > i {
  flex: none;
  color: var(--fg-faint);
  font-size: 12px;
}
.pl-cerca > input {
  width: 100%;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--fg);
  font-family: inherit;
  font-size: 12.5px;
}

.pl-data {
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 6px 0 9px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--surface);
  cursor: pointer;
}
.pl-data:focus-within {
  border-color: var(--accent);
}
.pl-data > input {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--fg);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  cursor: pointer;
}

html.dark .pl-data > input {
  color-scheme: dark;
}

.pl-hores {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: none;
}
.pl-hores > i {
  color: var(--fg-faint);
  font-size: 11px;
}
.pl-hores > span {
  color: var(--fg-faint);
  font-size: 12px;
}
.pl-hores select {
  height: 30px;
  margin: 0;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--fg);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
}

.pl-menu {
  position: fixed;
  z-index: 200;
  width: 250px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: plPuja 0.14s ease both;
}

.pl-menu__titol {
  padding: 6px 9px 5px;
  color: var(--fg-faint);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pl-menu__opcio {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  height: 32px;
  padding: 0 9px;
  border: 0;
  border-radius: var(--r-seg);
  background: transparent;
  color: var(--fg-muted);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.pl-menu__opcio:hover {
  background: var(--surface-2);
}
.pl-menu__opcio > span:nth-child(2) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pl-menu__opcio--activa {
  color: var(--fg);
  font-weight: 600;
}

.pl-menu__casella {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--surface);
  color: transparent;
  font-size: 8.5px;
}
.pl-menu__opcio--activa .pl-menu__casella {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-fg);
}

.pl-menu__compte {
  color: var(--fg-faint);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
}

.pl-menu__comp {
  color: var(--fg-faint);
  font-size: 10px;
}

.pl-menu__separador {
  height: 1px;
  margin: 5px 0;
  background: var(--border-soft);
}

.pl-menu__peu {
  display: flex;
  gap: 6px;
  padding: 2px;
}
.pl-menu__peu .pl-btn {
  flex: 1;
  height: 28px;
  justify-content: center;
  font-size: 12px;
}

.pl-diaTitol {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pl-dies {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.pl-dies__tira {
  display: flex;
  gap: 4px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.pl-dies__ajuda {
  color: var(--fg-faint);
  font-size: 10.5px;
  white-space: nowrap;
}

.pl-dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 42px;
  flex: 0 0 42px;
  padding: 4px 0 5px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--fg-muted);
  font-family: inherit;
  cursor: pointer;
}
.pl-dia:hover {
  background: var(--surface-2);
}

.pl-dia--actiu {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-fg);
}
.pl-dia--actiu:hover {
  background: var(--accent);
}

.pl-dia--festiu .pl-dia__num {
  color: var(--danger);
}
.pl-dia--actiu .pl-dia--festiu .pl-dia__num {
  color: inherit;
}

.pl-dia__dow {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.72;
}

.pl-dia__num {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.pl-dia__punt {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}
.pl-dia--actiu .pl-dia__punt {
  background: var(--accent-fg);
}

.pl-cos {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.pl-graellaEnvolta {
  position: relative;
  flex: 1;
  min-width: 0;
}

.pl-graella {
  position: absolute;
  inset: 0;
  overflow: auto;
  background: var(--bg);
}

.pl-seccio__titol {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.pl-seccio__titol > b {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: capitalize;
}
.pl-seccio__titol > span {
  color: var(--fg-faint);
  font-size: 11.5px;
}

.pl-seccio__treu {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--fg-faint);
  font-size: 10px;
  cursor: pointer;
}
.pl-seccio__treu:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.pl-seccio__cos {
  display: flex;
  min-width: max-content;
  align-items: flex-start;
}

.pl-canal {
  position: sticky;
  left: 0;
  z-index: 30;
  width: var(--pl-canal);
  flex: 0 0 var(--pl-canal);
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.pl-canal__cap {
  height: 44px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.pl-canal__hora {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  height: var(--pl-hora);
  padding: 3px 7px 0 0;
  color: var(--fg-faint);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1;
}

.pl-col {
  flex: 1 1 var(--pl-col);
  min-width: var(--pl-col);
  background: var(--surface);
  border-right: 1px solid var(--border-soft);
}

.pl-col__cap {
  position: relative;
  z-index: 20;
  height: 44px;
  padding: 5px 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.pl-graella--undia .pl-col__cap,
.pl-graella--undia .pl-canal__cap {
  position: sticky;
  top: 0;
}

.pl-col__codi {
  display: flex;
  align-items: center;
  gap: 5px;
}
.pl-col__codi > b {
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pl-col__insignia {
  padding: 1px 4px;
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--fg-faint);
  font-size: 9px;
  font-weight: 600;
}

.pl-col__nom {
  overflow: hidden;
  color: var(--fg-faint);
  font-size: 10px;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pl-col__ocupacio {
  height: 2px;
  margin-top: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--border-soft);
}
.pl-col__ocupacio > div {
  height: 100%;
  background: var(--accent);
}

.pl-col__ocupacio--plena > div {
  background: var(--pending);
}

.pl-app--estret .pl-col__cap {
  padding: 5px 5px 4px;
}
.pl-app--estret .pl-col__nom,
.pl-app--estret .pl-col__insignia,
.pl-app--estret .pl-cita__meta,
.pl-app--estret .pl-cita__org,
.pl-app--estret .pl-cita__comps {
  display: none;
}
.pl-app--estret .pl-cita {
  padding-right: 3px;
  padding-left: 4px;
}
.pl-app--estret .pl-cita__titol {
  -webkit-line-clamp: 3;
  font-size: 10.5px;
}

.pl-col__cos {
  position: relative;
  cursor: copy;
}

.pl-col__cos--nomesLectura {
  cursor: default;
}

.pl-fons {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--pl-hora) / 2 - 1px), var(--surface-2) calc(var(--pl-hora) / 2 - 1px), var(--surface-2) calc(var(--pl-hora) / 2), transparent calc(var(--pl-hora) / 2), transparent calc(var(--pl-hora) - 1px), var(--border-soft) calc(var(--pl-hora) - 1px), var(--border-soft) var(--pl-hora));
}

.pl-col__cos--festiu {
  background: color-mix(in srgb, var(--danger) 4%, var(--surface));
}

.pl-cita {
  position: absolute;
  overflow: hidden;
  padding: 4px 6px 4px 7px;
  border: 1px solid var(--pl-bar);
  border-left: 3px solid var(--pl-bar);
  border-radius: 7px;
  background: color-mix(in srgb, var(--pl-bar) 20%, var(--surface));
  color: color-mix(in oklab, var(--pl-bar) 40%, var(--fg));
  cursor: grab;
  user-select: none;
  transition: box-shadow 120ms ease;
  z-index: 10;
}

html.dark .pl-cita {
  background: color-mix(in srgb, var(--pl-bar) 30%, var(--surface));
  color: color-mix(in oklab, var(--pl-bar) 22%, var(--fg));
}

.pl-cita--baixa {
  padding: 0 6px 0 7px;
}

.pl-cita--sel {
  border: 2px solid var(--fg);
  border-left: 2px solid var(--fg);
  box-shadow: 0 4px 14px oklch(30% 0.02 255deg / 0.18);
  z-index: 40;
}

.pl-cita--arrossega {
  opacity: 0.93;
  box-shadow: var(--shadow-lg);
  cursor: grabbing;
  transition: none;
  z-index: 60;
}

.pl-cita--avis {
  outline: 1.5px solid var(--danger);
}

.pl-cita--prereserva {
  border-style: dashed;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pl-bar) 14%, var(--surface)) 0 6px, color-mix(in srgb, var(--pl-bar) 28%, var(--surface)) 6px 12px);
}

.pl-cita--denegada {
  opacity: 0.55;
}
.pl-cita--denegada .pl-cita__titol {
  text-decoration: line-through;
}

.pl-cita__titol {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
  text-overflow: ellipsis;
}

.pl-cita--alta .pl-cita__titol {
  -webkit-line-clamp: 2;
}

.pl-cita__meta {
  margin-top: 1px;
  overflow: hidden;
  font-size: 10.5px;
  opacity: 0.9;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pl-cita__org {
  overflow: hidden;
  font-size: 10px;
  opacity: 0.68;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pl-cita__comps {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.pl-cita__comps > span {
  padding: 1px 5px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--pl-bar) 18%, transparent);
  font-size: 9.5px;
  font-weight: 500;
}

.pl-cita__marca {
  position: absolute;
  top: 3px;
  right: 4px;
  font-size: 10px;
  color: var(--danger);
}

.pl-cita__nansa {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7px;
  border-radius: 0 0 7px 7px;
  cursor: ns-resize;
}

.pl-horari {
  position: absolute;
  left: 0;
  width: 11px;
  border-radius: 0 4px 4px 0;
  background: color-mix(in srgb, var(--pl-bar) 55%, var(--surface));
  cursor: pointer;
  z-index: 5;
}
.pl-horari:hover {
  background: var(--pl-bar);
}

.pl-esborrany {
  position: absolute;
  left: 2px;
  right: 2px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px dashed var(--accent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: color-mix(in srgb, var(--accent) 72%, var(--fg));
  pointer-events: none;
  z-index: 70;
}
.pl-esborrany > b {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
}
.pl-esborrany > span {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.72;
}

.pl-buit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 18px;
  color: var(--fg-faint);
  font-size: 13px;
  text-align: center;
}

.pl-panell {
  display: flex;
  flex-direction: column;
  width: 366px;
  flex: 0 0 366px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -6px 0 24px oklch(30% 0.02 255deg / 0.06);
  animation: plPuja 0.16s ease both;
}

.pl-panell__vista {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.pl-panell__cap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 0 0 auto;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--pl-bar, var(--accent)) 12%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--pl-bar, var(--accent)) 45%, var(--surface));
}

.pl-panell__cap--form {
  align-items: center;
  background: var(--accent-soft);
  border-bottom-color: color-mix(in srgb, var(--accent) 26%, var(--surface));
}

.pl-panell__icona {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--r-btn);
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 13px;
}

.pl-panell__titol {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.pl-panell__sub {
  overflow: hidden;
  color: var(--fg-muted);
  font-size: 11.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pl-panell__tanca {
  width: 28px;
  height: 28px;
  padding: 0;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--r-seg);
  background: var(--surface);
  color: var(--fg-muted);
  cursor: pointer;
}
.pl-panell__tanca:hover {
  background: var(--surface-2);
}

.pl-panell__cos {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 18px;
  overscroll-behavior: contain;
}
.pl-panell__cos::-webkit-scrollbar {
  width: 8px;
  background: transparent;
}
.pl-panell__cos::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--border-strong);
}

.pl-panell__peu {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
}

.pl-xip {
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--pl-bar, var(--accent));
  color: var(--accent-fg);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.pl-xip--neutre {
  padding: 3px 7px;
  background: var(--surface-2);
  color: var(--fg-muted);
}

.pl-camps {
  display: flex;
  flex-direction: column;
}

.pl-camps__fila {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-soft);
}
.pl-camps__fila > span:first-child {
  flex: 0 0 96px;
  color: var(--fg-faint);
  font-size: 12px;
}
.pl-camps__fila > span:last-child {
  min-width: 0;
  font-size: 13px;
}

.pl-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--pl-bar, var(--accent));
  color: var(--accent-fg);
  font-size: 9.5px;
  font-weight: 600;
}

.pl-rotul {
  margin-bottom: 8px;
  color: var(--fg-faint);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pl-obs {
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.pl-avis {
  display: flex;
  gap: 9px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--pending);
  border-radius: 10px;
  background: var(--pending-soft);
  color: var(--pending-fg);
  font-size: 12.5px;
  line-height: 1.45;
}

.pl-veins {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pl-vei {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--fg);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.pl-vei:hover {
  background: var(--surface-2);
}
.pl-vei > i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 3px;
  background: var(--pl-bar, var(--accent));
}
.pl-vei > b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pl-vei > span {
  color: var(--fg-faint);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
}

.pl-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pl-form__grup {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pl-form__grup > label {
  margin: 0;
  padding: 0;
  color: var(--fg-muted);
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
}

.pl-form__cols3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.pl-form__cols2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.pl-form__separador {
  height: 1px;
  margin: 4px 0;
  background: var(--border-soft);
}

.pl-form__durades {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pl-durada {
  height: 26px;
  padding: 0 9px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-seg);
  background: var(--surface-2);
  color: var(--fg-muted);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
}
.pl-durada:hover {
  border-color: var(--accent);
  color: var(--fg);
}

.pl-comp {
  height: 27px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--fg-muted);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
}

.pl-comp--actiu {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: color-mix(in srgb, var(--accent) 70%, var(--fg));
}

.pl-form__xips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.pl-form input[type=text],
.pl-form input[type=number],
.pl-form input[type=date],
.pl-form input[type=time],
.pl-form textarea,
.pl-form select {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  height: 32px;
  margin: 0;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--fg);
  font-family: inherit;
  font-size: 13px;
}
.pl-form input[type=text]:focus,
.pl-form input[type=number]:focus,
.pl-form input[type=date]:focus,
.pl-form input[type=time]:focus,
.pl-form textarea:focus,
.pl-form select:focus {
  border-color: var(--accent);
  outline: none;
}
.pl-form textarea {
  min-height: 70px;
  height: auto;
  padding: 8px 9px;
  line-height: 1.5;
  resize: vertical;
}
.pl-form .ts-wrapper {
  width: 100% !important;
  min-width: 0;
}
.pl-form .ts-control {
  min-height: 32px;
  padding: 0 4px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-btn);
  background: var(--surface);
}
.pl-form .ts-wrapper.focus .ts-control {
  border-color: var(--accent) !important;
}

.pl-form__hora input {
  font-family: "IBM Plex Mono", monospace;
}

.pl-form__cerca {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pl-form__cerca > i {
  flex: 0 0 auto;
  color: var(--fg-faint);
  cursor: pointer;
}
.pl-form__cerca > i:hover {
  color: var(--accent);
}

.pl-form__periodica {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--fg-muted);
  font-size: 12.5px;
  font-weight: 600;
}

.pl-vista {
  position: fixed;
  z-index: 300;
  width: 282px;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  animation: plPuja 0.12s ease both;
}

.pl-vista__cap {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}
.pl-vista__cap > i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--pl-bar, var(--accent));
}
.pl-vista__cap > b {
  color: var(--fg-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pl-vista__cap > span {
  color: var(--fg-faint);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
}

.pl-vista__titol {
  margin-bottom: 7px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.pl-vista__dades {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--fg-muted);
  font-size: 12px;
}
.pl-vista__dades em {
  color: var(--fg-faint);
  font-style: normal;
}

.pl-vista__obs {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--border-soft);
  color: var(--fg-faint);
  font-size: 11.5px;
  line-height: 1.45;
}

.pl-vista__peu {
  margin-top: 8px;
  color: var(--fg-faint);
  font-size: 10.5px;
}

.pl-peu {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 40px;
  flex: 0 0 auto;
  padding: 0 18px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.pl-peu__estat {
  flex: 0 0 auto;
  color: var(--fg-muted);
  font-size: 12px;
  white-space: nowrap;
}

.pl-toast {
  position: fixed;
  left: 50%;
  bottom: 58px;
  z-index: 400;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 11px;
  background: var(--fg);
  color: var(--surface);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  transform: translateX(-50%);
  animation: plPuja 0.16s ease both;
}

.pl-toast__desfes {
  padding: 0;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--accent) 55%, var(--surface));
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

@keyframes plPuja {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes plPujaCentrat {
  from {
    opacity: 0;
    transform: translate(-50%, 5px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}
.pl-toast {
  animation-name: plPujaCentrat;
}

.pl-widget {
  --pl-hora: 34px;
  --pl-col: 96px;
  --pl-canal: 42px;
  max-height: 100%;
  overflow: auto;
}
.pl-widget .pl-col__cos {
  cursor: pointer;
}
.pl-widget .pl-cita {
  cursor: pointer;
}

@media (max-width: 900px) {
  .pl-panell {
    width: 300px;
    flex-basis: 300px;
  }
}
.fb-estret {
  max-width: 720px;
}

.fb-estret--mini {
  max-width: 640px;
}

.fb-fitxer {
  height: auto;
  padding: 8px 12px;
}

.fb-pas-clic {
  color: var(--fg);
  cursor: pointer;
}
.fb-pas-clic:hover {
  background: var(--surface-2);
}

.fb-intro {
  margin: 0 0 16px;
  max-width: 80ch;
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg-muted);
}

.fb-codis {
  display: inline-flex;
  gap: 4px;
}

.asst-taula__tr.fb-fila.es-baixa {
  opacity: 1;
}
.asst-taula__tr.fb-fila.es-baixa > *:not(.fb-menu-wrap) {
  opacity: 0.55;
}

.fb-menu-wrap {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.fb-menu__btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--fg-muted);
  font-size: 14px;
  cursor: pointer;
}
.fb-menu__btn:hover, .fb-menu__btn[aria-expanded=true] {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--fg);
}

.fb-menu-vel {
  position: fixed;
  inset: 0;
  z-index: 20;
}

.fb-menu {
  position: absolute;
  top: 32px;
  right: 0;
  z-index: 21;
  min-width: 176px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
}
.fb-menu.fb-menu--amunt {
  top: auto;
  bottom: 32px;
}

.fb-menu__item {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--r-seg);
  background: none;
  color: var(--fg);
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.fb-menu__item:hover {
  background: var(--surface-2);
}
.fb-menu__item i {
  width: 14px;
  color: var(--fg-muted);
}

.fb-menu__item--perill {
  color: var(--danger-fg);
}
.fb-menu__item--perill:hover {
  background: var(--danger-soft);
}
.fb-menu__item--perill i {
  color: var(--danger);
}

.asst-taula:has(.fb-menu) {
  overflow: visible;
}

.fb-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 13px;
}

.fb-filtres {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.fb-titol-input {
  flex: 1 1 auto;
  min-width: 180px;
  margin: 0;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.fb-titol-input:hover {
  border-color: var(--border);
}
.fb-titol-input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.fb-camps {
  display: grid;
  grid-template-columns: 240px 1fr 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.fb-camps.has-sel {
  grid-template-columns: 240px 1fr 320px;
}

.fb-palette {
  overflow: auto;
  padding: 12px;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.fb-pal-h {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin: 4px 0;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  color: var(--fg-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
}
.fb-pal-h:hover {
  color: var(--fg);
}
.fb-pal-h i {
  width: 10px;
  font-size: 10px;
}

.fb-pal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.fb-tile,
.fb-struct {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-seg);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: grab;
}
.fb-tile:hover,
.fb-struct:hover {
  border-color: var(--accent);
  background: var(--surface-2);
}

.fb-tile {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.fb-struct {
  border-style: dashed;
  margin-bottom: 6px;
}

.fb-glyph {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  color: var(--accent);
}

.fb-tile-ent .fb-glyph {
  color: var(--ok);
}

.fb-canvas {
  overflow: auto;
  padding: 24px 0;
  background: var(--bg);
}

.fb-form-card {
  max-width: 640px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.fb-accent-bar {
  height: 8px;
  background: var(--accent);
}

.fb-cap {
  padding: 12px 16px 0;
}

.fb-cap--buit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 16px 0;
  padding: 10px 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-seg);
}
.fb-cap--buit > .asst-btn {
  flex: none;
  white-space: nowrap;
}

.fb-cap-avis {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-muted);
  font-size: 12px;
}

.fb-cap-file {
  display: none;
}

.fb-cap-img {
  display: block;
  max-width: 60%;
  max-height: 72px;
  object-fit: contain;
}

.fb-cap-eines {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: var(--fg-muted);
  font-size: 12px;
}
.fb-cap-eines > label {
  font-size: 12px;
}
.fb-cap-eines .fb-range {
  width: auto;
  flex: 1;
  min-width: 70px;
}

.fb-canvas-title,
.fb-canvas-sub {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 6px 16px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--fg);
  font: inherit;
}
.fb-canvas-title:hover,
.fb-canvas-sub:hover {
  border-color: var(--border);
}
.fb-canvas-title:focus,
.fb-canvas-sub:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.fb-canvas-title {
  margin-top: 8px;
  font-size: 19px;
  font-weight: 700;
}

.fb-canvas-sub {
  font-size: 13px;
  color: var(--fg-muted);
}

.fb-fields {
  min-height: 60px;
  padding: 10px 16px 20px;
}

.fb-field {
  position: relative;
  margin-bottom: 8px;
  padding: 12px 14px 12px 32px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: var(--surface-2);
  cursor: pointer;
}
.fb-field:hover {
  border-color: var(--border);
}
.fb-field.is-sel {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.fb-field.drop-before {
  box-shadow: 0 -3px 0 var(--accent);
}

.fb-field .asst-drag {
  position: absolute;
  top: 12px;
  left: 8px;
  letter-spacing: -2px;
  user-select: none;
}

.fb-field .asst-esborra {
  position: absolute;
  top: 8px;
  right: 8px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
}

.fb-f-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.fb-camp-etiqueta {
  font-size: 13px;
  font-weight: 600;
}

.fb-req {
  color: var(--danger);
  font-weight: 700;
}

.fb-map {
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--fg-muted);
  font-size: 11px;
}

.fb-map-on {
  border-color: var(--ok);
  background: var(--ok-soft);
  color: var(--ok-fg);
}

.fb-valid {
  padding: 1px 8px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-pill);
  color: var(--fg-muted);
  font-size: 11px;
}
.fb-valid:empty {
  display: none;
}

.fb-f-stub {
  width: 100%;
  height: 30px;
  margin: 8px 0 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
}

.fb-f-heading {
  font-size: 16px;
  font-weight: 700;
}

.fb-f-info {
  font-weight: 400;
  color: var(--fg-muted);
}

.fb-f-seccio {
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.fb-f-img {
  display: block;
  max-width: 100%;
  border-radius: var(--r-seg);
}

.fb-f-imgph {
  padding: 22px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-seg);
  background: var(--surface);
  color: var(--fg-muted);
  text-align: center;
}

.fb-prop-img {
  max-width: 100%;
  margin: 8px 0;
  border: 1px solid var(--border);
  border-radius: var(--r-seg);
}

.fb-rep-inner {
  margin-top: 8px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: var(--r-seg);
  color: var(--fg-muted);
  font-size: 12px;
}

.fb-rep-child {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  font-size: 12px;
  cursor: pointer;
}
.fb-rep-child:hover {
  border-color: var(--accent);
}
.fb-rep-child.is-sel {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.fb-rep-child .fb-rep-clabel {
  flex: 1;
}
.fb-rep-child .fb-valid {
  margin-left: auto;
}

.fb-rep-add {
  margin-top: 6px;
  color: var(--accent);
  font-size: 12px;
}

.fb-child-opt {
  cursor: pointer;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
}
.fb-child-opt:hover {
  border-color: var(--accent);
}
.fb-child-opt .fb-child-nom {
  flex: 1;
}

.fb-props-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-seg);
  background: var(--surface);
  color: var(--fg-muted);
  font-size: 12px;
  cursor: pointer;
}
.fb-props-back:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.fb-child-mou[disabled] {
  opacity: 0.3;
  cursor: default;
}

.fb-child-del {
  margin-top: 12px;
}

.fb-props {
  overflow: auto;
  padding: 14px;
  background: var(--surface);
  border-left: 1px solid var(--border);
}

.fb-props--buit {
  padding: 0;
  border-left: 0;
}

.fb-props-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
}

.fb-prop {
  margin-bottom: 12px;
}

.fb-prop-group {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.fb-prop-title {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
}

.fb-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fb-opt {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fb-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.fb-conn {
  margin-bottom: 10px;
}
.fb-conn.is-on {
  border-color: var(--accent);
}

.fb-accio-cfg {
  display: grid;
  gap: 12px;
  margin-top: -10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: var(--surface-2);
}

.fb-accio-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.fb-accio-nom {
  font-size: 13px;
  font-weight: 600;
}

.fb-apunt-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.fb-color-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.fb-color-row > label,
.fb-range-row > label,
.fb-img-head > label {
  font-size: 13px;
}

.fb-color-val {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--fg-muted);
}

.fb-link-btn {
  margin: 0;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.fb-link-btn:hover {
  text-decoration: underline;
}

.fb-img-row {
  margin-bottom: 14px;
}

.fb-img-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.fb-img-prev {
  display: block;
  max-width: 100%;
  max-height: 120px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-seg);
  object-fit: cover;
}

.fb-range-row {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.fb-range {
  width: 100%;
}

.fb-range-val {
  min-width: 38px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--fg-muted);
  text-align: right;
}

.fb-theme-preview {
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.asst-card__b > .fb-color-row,
.asst-card__b > .fb-range-row,
.asst-card__b > .fb-img-row {
  margin-bottom: 0;
}

.fp-prev-page {
  display: flex;
  justify-content: center;
  min-height: 190px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #eef1f6;
}

.fp-prev-card {
  width: 100%;
  max-width: 400px;
  padding: 0 0 16px;
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.fp-prev-bar {
  height: 8px;
  background: #2a62eb;
}

.fp-prev-logo {
  display: none;
  height: 34px;
  margin: 14px 16px 6px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

.fp-prev-h {
  height: 14px;
  width: 60%;
  margin: 14px 16px 8px;
  border-radius: 4px;
  background: #2b2f36;
}

.fp-prev-line {
  height: 8px;
  width: 80%;
  margin: 0 16px 14px;
  border-radius: 4px;
  background: #c7ccd4;
}

.fp-prev-field {
  height: 30px;
  margin: 0 16px 12px;
  border: 1px solid #dfe3ea;
  border-radius: 6px;
  background: #f2f4f8;
}

.fp-prev-btn {
  display: inline-block;
  margin: 0 16px;
  padding: 7px 16px;
  border-radius: 7px;
  background: #2a62eb;
  color: #fff;
  font-size: 12px;
}

.fb-dest-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.fb-link-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.fb-link-inp {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
}

.fb-mail-card .fb-dest-actions {
  margin: 8px 0 4px;
}
.fb-mail-card .asst-avis {
  margin-top: 12px;
}

.fb-marcador {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--surface-2);
  font-size: 12px;
  color: var(--fg-muted);
}
.fb-marcador > span {
  flex: 1;
}

.fb-marcador__codi {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--fg);
}

.fb-marcador-avis {
  margin: -4px 0 12px;
  border-color: var(--pending);
  background: var(--pending-soft);
  color: var(--pending-fg);
}

.fb-prova {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  min-width: 0;
  font-size: 12px;
  color: var(--fg-muted);
  font-weight: 400;
}

.fb-prova__inp {
  width: 210px;
  max-width: 100%;
  height: var(--h-btn);
}

.fb-ac-avis {
  margin-left: 5px;
  color: var(--pending);
  font-size: 11px;
}

.fb-dest-peu {
  margin-top: 14px;
}

.fb-enllac {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.fb-enllac:hover {
  color: var(--accent);
  text-decoration: none;
}

.fb-ac {
  position: relative;
}

.fb-ac-camp {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fb-ac-inp {
  flex: 1;
  min-width: 0;
}

.fb-ac-lupa,
.fb-ac-edita {
  flex: none;
}

.fb-ac-llista {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  max-height: 260px;
  margin-top: 4px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.fb-ac-llista[hidden] {
  display: none;
}

.fb-ac-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 13px;
}
.fb-ac-item + .fb-ac-item {
  border-top: 1px solid var(--border-soft);
}
.fb-ac-item span {
  font-size: 11px;
  color: var(--fg-muted);
}
.fb-ac-item:hover, .fb-ac-item.is-actiu {
  background: var(--surface-2);
}
.fb-ac-item.is-sel b {
  color: var(--accent);
}

.fb-ac-buit {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--fg-muted);
}

.fb-plt-dialeg {
  width: min(1000px, 100vw - 32px);
}

.fb-plt-cap {
  display: flex;
  align-items: center;
  gap: 16px;
}
.fb-plt-cap input {
  width: 240px;
}

.fb-plt-cos {
  max-height: min(560px, 100vh - 220px);
  overflow-y: auto;
}

.fb-plt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

.fb-plt-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--fg);
  text-align: left;
  cursor: pointer;
}
.fb-plt-card:hover {
  border-color: var(--accent);
}
.fb-plt-card.is-on {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.fb-plt-card[hidden] {
  display: none;
}

.fb-plt-mini {
  display: block;
  height: 170px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-seg);
  background: #fff;
}

.fb-plt-frame {
  width: 640px;
  height: 545px;
  border: 0;
  transform: scale(0.32);
  transform-origin: top left;
  pointer-events: none;
}

:root.dark .fb-plt-mini iframe.fb-plt-frame {
  filter: none;
}

.fb-plt-nom {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.fb-plt-ass {
  font-size: 11px;
  color: var(--fg-muted);
  line-height: 1.3;
}

.fb-di {
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.fb-di:first-child {
  border-top: 0;
}

.fb-di-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
}

.fb-di-map {
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--ok-soft);
  color: var(--ok-fg);
  font-size: 11px;
  font-weight: 400;
}

.fb-di-pol {
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 400;
}

.fb-di-val {
  font-size: 14px;
  white-space: pre-wrap;
}

.fb-di-recon {
  display: grid;
  grid-template-columns: 1fr 24px 1fr;
  align-items: center;
  gap: 8px;
}

.fb-di-col {
  min-width: 0;
}

.fb-di-tag {
  display: block;
  margin-bottom: 2px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.fb-di-arrow {
  color: var(--fg-muted);
  text-align: center;
}

.fb-di-old {
  color: var(--fg-muted);
  text-decoration: line-through;
}

.fb-di-diff .fb-di-recon {
  padding: 8px;
  border-radius: var(--r-seg);
  background: var(--pending-soft);
}

.fb-di-rep {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fb-di-reprow {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 8px 10px;
  border-radius: var(--r-seg);
  background: var(--surface-2);
  font-size: 13px;
}

.fb-di-repcell em {
  color: var(--fg-muted);
  font-style: normal;
}

.fb-di-img {
  display: block;
  max-width: 160px;
  max-height: 120px;
  border: 1px solid var(--border);
  border-radius: var(--r-seg);
}

.fb-di-file {
  color: var(--accent);
  text-decoration: none;
}

.dp-fila {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
.dp-fila:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.dp-accions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dp-edita {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
}

.dp-verificacio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.dp-pestanyes {
  flex: 0 0 auto;
}

.dp-pestanya--inert {
  opacity: 0.45;
  cursor: not-allowed;
}

.dp-avis-topbar {
  margin: 12px 22px 0;
}

.dp-editor {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}
.dp-editor.te-previa {
  grid-template-columns: 270px minmax(0, 1fr) minmax(0, 1fr);
}

.dp-palette {
  overflow: auto;
  padding: 12px;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.dp-pal-avis {
  margin-bottom: 10px;
}

.dp-pal-sec {
  margin-bottom: 6px;
}

.dp-pal-h {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin: 4px 0;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  color: var(--fg-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.dp-pal-h:hover {
  color: var(--fg);
}
.dp-pal-h i {
  width: 10px;
  font-size: 10px;
}

.dp-pal-cos {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dp-tile {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 1px dashed var(--border);
  border-radius: var(--r-seg);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: grab;
}
.dp-tile i {
  width: 16px;
  color: var(--accent);
  text-align: center;
}
.dp-tile:hover {
  border-color: var(--accent);
  background: var(--surface-2);
}
.dp-tile:active {
  cursor: grabbing;
}

.dp-pal-ajuda {
  margin-top: 10px;
}

.dp-codi {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.dp-codi .CodeMirror {
  flex: 1 1 auto;
  height: auto;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  background: var(--surface);
  color: var(--fg);
}
.dp-codi .CodeMirror-gutters {
  background: var(--surface-2);
  border-right: 1px solid var(--border);
}
.dp-codi .CodeMirror-linenumber {
  color: var(--fg-faint);
}
.dp-codi .CodeMirror-cursor {
  border-left-color: var(--fg);
}
.dp-codi .CodeMirror-selected {
  background: var(--accent-soft);
}
.dp-codi .cm-tag {
  color: var(--ok-fg);
}
.dp-codi .cm-attribute {
  color: var(--pending-fg);
}
.dp-codi .cm-string {
  color: var(--danger-fg);
}
.dp-codi .cm-comment {
  color: var(--fg-faint);
  font-style: italic;
}
.dp-codi .cm-variable-2 {
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 3px;
  font-weight: 600;
}

.dp-previa {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-left: 1px solid var(--border);
  background: var(--bg);
}
.dp-previa iframe {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: #fff;
}

.dp-previa__cap {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--fg-muted);
  font-size: 12px;
}

.asst-btn.is-on {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.dp-editor.mode-disseny {
  grid-template-columns: minmax(0, 1fr);
}

.dp-disseny {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg);
}
.dp-disseny iframe {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: #fff;
}

:root.dark .dp-disseny iframe,
:root.dark .dp-previa iframe {
  filter: none;
}

.dp-disseny__avis {
  margin: 24px;
  padding: 16px 18px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-card);
  color: var(--fg-muted);
  font-size: 13px;
}

.dp-bloc-barra {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px 4px 3px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.dp-bloc-nom {
  max-width: 220px;
  margin-right: 6px;
  overflow: hidden;
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dp-bloc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fg);
  font-size: 12.5px;
  cursor: pointer;
}
.dp-bloc-btn:hover:not(:disabled) {
  background: var(--surface-2);
}
.dp-bloc-btn:disabled {
  color: var(--fg-faint);
  cursor: default;
}

.dp-bloc-btn--perill:hover:not(:disabled) {
  background: var(--danger-soft);
  color: var(--danger-fg);
}

.dp-bloc-menu {
  position: absolute;
  z-index: 6;
  width: 280px;
  max-height: 60%;
  padding: 6px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.dp-bloc-menu__h {
  padding: 8px 8px 4px;
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dp-bloc-menu__i {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-seg);
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.dp-bloc-menu__i i {
  width: 16px;
  color: var(--accent);
  text-align: center;
}
.dp-bloc-menu__i:hover {
  background: var(--surface-2);
}

.dp-bloc-dialeg {
  width: min(1100px, 94vw);
  max-width: none;
}

.dp-bloc-dialeg__cos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 14px;
  height: min(62vh, 560px);
}

.dp-bloc-dialeg__codi {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.dp-bloc-dialeg__codi .CodeMirror {
  height: 100%;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  background: var(--surface);
  color: var(--fg);
}
.dp-bloc-dialeg__codi .CodeMirror-gutters {
  background: var(--surface-2);
  border-right: 1px solid var(--border);
}
.dp-bloc-dialeg__codi .CodeMirror-linenumber {
  color: var(--fg-faint);
}
.dp-bloc-dialeg__codi .cm-tag {
  color: var(--ok-fg);
}
.dp-bloc-dialeg__codi .cm-attribute {
  color: var(--pending-fg);
}
.dp-bloc-dialeg__codi .cm-string {
  color: var(--danger-fg);
}
.dp-bloc-dialeg__codi .cm-comment {
  color: var(--fg-faint);
  font-style: italic;
}
.dp-bloc-dialeg__codi .cm-variable-2 {
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 3px;
  font-weight: 600;
}

.dp-bloc-dialeg__cap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dp-bloc-vista {
  flex: 0 0 auto;
}

.dp-bloc-dialeg__visual {
  display: flex;
  min-width: 0;
  min-height: 0;
}
.dp-bloc-dialeg__visual .edn-mount, .dp-bloc-dialeg__visual .edn-wrapper {
  flex: 1 1 auto;
  min-width: 0;
}
.dp-bloc-dialeg__visual .edn-wrapper {
  display: flex;
  flex-direction: column;
}
.dp-bloc-dialeg__visual .edn-host {
  flex: 1 1 auto;
  min-height: 0;
}

.dp-bloc-dialeg__paleta {
  min-width: 0;
  overflow: auto;
  padding-right: 4px;
}

.dp-pal-h--fix {
  cursor: default;
}

@media (max-width: 900px) {
  .dp-editor,
  .dp-editor.te-previa {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .dp-palette {
    max-height: 40vh;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .dp-previa {
    display: none;
  }
}
.pc-intro {
  max-width: 70em;
  margin-bottom: 0.8em;
  color: var(--color-text-2);
}

.pc-intro__nota {
  margin-top: 0.6em;
}

.pc-pantalla {
  color: var(--color-text-2);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.85rem;
}

.pc-selector {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

.pc-cerca {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.5em 0.7em;
  border: 1px solid var(--border);
  border-radius: var(--r-seg, 8px);
  background: var(--surface);
}
.pc-cerca > i {
  color: var(--fg-muted);
}

.pc-cerca__camp {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}
.pc-cerca__camp:focus {
  outline: none;
}

.pc-nomes {
  display: flex;
  align-items: center;
  gap: 0.4em;
  color: var(--fg-muted);
  font-size: 0.85rem;
  white-space: nowrap;
  cursor: pointer;
}

.pc-resum {
  color: var(--fg-muted);
  font-size: 0.85rem;
}

.pc-llista {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
}

.pc-pal-h__titol {
  flex: 1 1 auto;
  letter-spacing: normal;
  text-transform: none;
  font-size: 0.95rem;
}

.pc-pal-h__marca {
  color: var(--accent);
}

.pc-comptador {
  color: var(--fg-muted);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.pc-pal-sec--viu > .pc-pal-h .pc-pal-h__titol {
  font-weight: 600;
}

.pc-pal-cos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22em, 1fr));
  gap: 0.4em;
  padding: 0.2em 0 0.6em;
}

.pc-tile {
  position: relative;
  align-items: flex-start;
  cursor: pointer;
}
.pc-tile > i:first-child {
  margin-top: 0.15em;
}

.pc-tile--viu {
  border-style: solid;
  border-left: 3px solid var(--accent);
}

.pc-tile__cos {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  min-width: 0;
}

.pc-tile__nom {
  font-weight: 500;
}

.pc-tile__marcador {
  align-self: flex-start;
  padding: 0.05em 0.35em;
  border-radius: 3px;
  background: var(--surface-2);
  color: var(--fg);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.8rem;
  word-break: break-all;
}

.pc-tile__alies,
.pc-tile__ajuda {
  color: var(--fg-muted);
  font-size: 0.78rem;
}

.pc-tile__fet {
  position: absolute;
  top: 0.3em;
  right: 0.4em;
  padding: 0.1em 0.5em;
  border-radius: var(--r-seg, 8px);
  background: var(--accent);
  color: var(--color-text-invertit, #fff);
  font-size: 0.72rem;
}

.pc-buit {
  padding: 0.4em 0.2em;
  color: var(--fg-muted);
  font-size: 0.85rem;
}

.pc-peu {
  max-width: 70em;
  margin-top: 1em;
  color: var(--fg-muted);
  font-size: 0.85rem;
}
.dir-num {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.dir-card-files {
  gap: 0;
  padding: 8px 18px 18px;
}

.dir-fila {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
}
.dir-fila:last-child {
  border-bottom: 0;
}

.dir-fila--ample {
  grid-template-columns: 200px 1fr;
}

.dir-fila__titol {
  font-size: 13px;
  font-weight: 600;
}

.dir-fila__ajuda {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--fg-muted);
}

.botoCreaVista.amagat {
  display: none;
}

.dir-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.dir-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dir-swatch {
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--r-seg);
  box-shadow: 0 0 0 2px var(--surface) inset;
  cursor: pointer;
  transition: transform 0.1s;
}
.dir-swatch:hover {
  transform: scale(1.08);
}
.dir-swatch.is-on {
  border-color: var(--fg);
}

.dir-icones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 8px;
}

.dir-icona {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--fg-muted);
  font-size: 18px;
  cursor: pointer;
}
.dir-icona:hover {
  border-color: var(--border-strong);
}

.dir-com {
  max-height: 320px;
  overflow: auto;
  padding: 4px 0;
}

.dir-com-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 15px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
}
.dir-com-item:last-child {
  border-bottom: 0;
}
.dir-com-item:hover {
  background: var(--surface-2);
}

.dir-com-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: var(--r-seg);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
}

.dir-com-txt {
  min-width: 0;
}

.dir-com-assumpte {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dir-com-estat {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  color: var(--fg-muted);
}

.dir-com-estat--enviada {
  color: var(--ok-fg);
}

.dir-com-buit {
  margin: 0;
  padding: 18px 15px;
  font-size: 12px;
  color: var(--fg-muted);
}

.dir-org-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.dir-org-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dir-org-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}

.dir-org-card__cap {
  align-items: center;
  border-top: 3px solid var(--border);
}

.dir-org-card__nom {
  flex: 1 1 auto;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.dir-org-card__accions {
  display: flex;
  flex: none;
  gap: 6px;
}

.dir-marca {
  width: var(--h-btn-sm);
  height: var(--h-btn-sm);
  font-size: 13px;
}
.dir-marca.is-on {
  border-color: var(--ok);
  background: var(--ok-soft);
  color: var(--ok-fg);
}
.dir-marca:disabled {
  opacity: 0.5;
  cursor: wait;
}

.dir-org-card__cos {
  flex: 1 1 auto;
  padding: 14px 18px;
}

.dir-org-card__descripcio {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--fg-muted);
}

.dir-org-card__peu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 11px 18px;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-2);
}

.dir-url {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dir-url__enllac {
  min-width: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.dir-com-item:link, a.dir-com-item:visited, a.dir-com-item:hover {
  color: var(--fg);
}
a.dir-url__enllac:link, a.dir-url__enllac:visited, a.dir-url__enllac:hover {
  color: var(--accent);
}

.po-num {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.po-graella {
  overflow: auto;
  max-height: var(--po-graella-alt, max(320px, 85dvh - 190px));
}
.po-graella .asst-taula__tr > :nth-child(-n+2),
.po-graella .asst-taula__tr > .po-col-resultat {
  position: sticky;
  z-index: 2;
  margin-block: -5px;
  padding-block: 5px;
  background: var(--po-fons-fila, var(--surface));
}
.po-graella .asst-taula__tr > :nth-child(-n+2) {
  align-self: stretch;
}
.po-graella .asst-taula__tr > :first-child {
  left: 0;
  box-shadow: 3px 0 0 var(--po-fons-fila, var(--surface));
}
.po-graella .asst-taula__tr > :nth-child(2) {
  left: calc(1.6rem + 3px);
  box-shadow: 3px 0 0 var(--po-fons-fila, var(--surface)), 4px 0 0 var(--border-soft);
}
.po-graella .asst-taula__tr > .po-col-resultat {
  right: 0;
  box-shadow: -3px 0 0 var(--po-fons-fila, var(--surface)), -4px 0 0 var(--border-soft);
}
.po-graella .asst-taula__tr > .po-col-resultat:focus-within {
  z-index: 4;
}
.po-graella .asst-taula__th,
.po-graella .asst-taula__tr:hover {
  --po-fons-fila: var(--surface-2);
}
.po-graella .asst-taula {
  overflow: visible;
  box-sizing: border-box;
  width: 100%;
  --asst-cols: var(--po-cols-amb-docs);
  --po-ample-minim: var(--po-ample-minim-amb-docs);
  min-width: var(--po-ample-minim, 100%);
}
.po-graella.po-oculta-docs .asst-taula {
  --asst-cols: var(--po-cols-sense-docs);
  --po-ample-minim: var(--po-ample-minim-sense-docs);
}
.po-graella.po-oculta-docs .asst-taula__tr > .po-col-doc {
  display: none;
}
.po-graella [data-po-fase].po-fase-amagat {
  display: none;
  pointer-events: none;
}
.po-graella .asst-taula__tr {
        gap: 3px;
        padding: 5px 8px;
  align-items: start;
}
.po-graella .asst-taula__tr:not(.asst-taula__th) > span {
  display: flex;
  align-items: center;
  min-height: 28px;
}
.po-graella .asst-taula__tr:not(.asst-taula__th) > .po-cel-total {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 28px;
}
.po-graella .asst-taula__tr:not(.asst-taula__th) > .po-cel-campanes {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
}
.po-graella .asst-taula__th .po-ordre[data-po-ordre=total] {
  position: relative;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
.po-graella .asst-taula__th .po-ordre[data-po-ordre=total] i {
  position: absolute;
  top: 50%;
  left: 0;
  opacity: 0;
  transform: translateY(-50%);
}
.po-graella .asst-taula__th .po-ordre[data-po-ordre=total]:hover, .po-graella .asst-taula__th .po-ordre[data-po-ordre=total]:focus-visible, .po-graella .asst-taula__th .po-ordre[data-po-ordre=total].is-on {
  padding-left: 13px;
}
.po-graella .asst-taula__th .po-ordre[data-po-ordre=total]:hover i, .po-graella .asst-taula__th .po-ordre[data-po-ordre=total]:focus-visible i, .po-graella .asst-taula__th .po-ordre[data-po-ordre=total].is-on i {
  opacity: 1;
}
.po-graella .asst-taula__th {
  position: sticky;
  top: 0;
  z-index: 3;
  align-items: center;
}
.po-graella .asst-cel-nom .asst-nom__linia {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.po-graella .po-nom-enllac {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.po-graella .po-nom-enllac b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.po-graella .asst-taula__th > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.po-graella .asst-taula__th > .po-th-item {
  position: relative;
  display: block;
}
.po-graella .asst-taula__th > .po-th-item .po-campanes {
  position: absolute;
  top: 50%;
  right: 0;
  background: var(--surface-2);
  opacity: 0;
  transform: translateY(-50%);
}
.po-graella .asst-taula__th > .po-th-item:hover .po-campanes, .po-graella .asst-taula__th > .po-th-item .po-campanes:focus-visible {
  opacity: 1;
}

.po-th-item__nom {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.po-taula-apunts {
  --asst-cols: 2.4fr 0.8fr 0.8fr;
}

.po-ajuda-icona {
  font-size: 14px;
  color: var(--fg-muted);
  cursor: help;
}

.asst-card > .po-graella > .asst-taula {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  box-shadow: none;
}

.po-filtres {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
}

.po-filtre {
  position: relative;
}
.po-filtre input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.po-filtre:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
}
.po-filtre:has(input:focus-visible) {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

a.po-obre:link,
a.po-obre:visited {
  color: var(--fg-muted);
  text-decoration: none;
}

a.po-obre:hover {
  color: var(--fg);
}

.po-fase-ajuda {
  margin-right: 4px;
  font-size: 11px;
  opacity: 0.75;
}

/* Una sola fila per a tota la capçalera de la graella (#233837): Acció i Fase
   (`.asst-camps`, rètol a sobre) i la fila de filtres (`.po-filtres`, caselles
   en línia) component línia. Els fills caben: `.po-filtres` s'asseu a la vora
   dreta i queda alineat amb els controls, no amb els rètols. */
.po-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 18px;
}
.po-cap .asst-camps {
  gap: 10px 16px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  /* La fila la parteixen camps i filtres: sense això, el mínim del grid
     (`1fr`, el costat del desplegable de l'Acció) treia els filtres a la
     línia de sota (#233837). El text del select es retalla amb `…`. */
  flex: 1 1 100%;
  min-width: 0;
}
.po-cap .asst-camps .asst-vincle,
.po-cap .asst-camps .asst-vincle select {
  min-width: 0;
}
.po-cap .asst-camps #poFases {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
}
.po-cap .asst-camps #poFases .asst-seg__btn {
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
  text-align: center;
}
@media (max-width: 900px) {
  /* Pantalla estreta (#255386): a dues columnes, la de les fases no arriba ni a la paraula més
       llarga de cada botó i els rètols se superposaven. Acció i Fase, una sota l'altra; els botons
       no s'encongeixen per sota de la seva paraula més llarga i, si no hi caben, salten de línia.
       El desplegable de l'Acció ocupa tota la fila i els filtres en icones baixen a sota. */
  .po-cap .asst-camps {
    grid-template-columns: minmax(0, 1fr);
  }
  .po-cap .asst-camps .asst-vincle-fila {
    flex-wrap: wrap;
  }
  .po-cap .asst-camps .asst-vincle {
    flex: 1 1 100%;
  }
  .po-cap .asst-camps #poFases {
    flex-wrap: wrap;
  }
  .po-cap .asst-camps #poFases .asst-seg__btn {
    min-width: min-content;
  }
}

.po-cel {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 28px;
}
.po-cel i {
  flex: none;
  font-size: 12px;
  cursor: pointer;
}

/* Caixa numèrica de la valoració, ajustada a la columna (#233021, i retallada a 34px perquè la
   graella d'un pla amb molts ítems carregui menys dins d'una pantalla de portàtil, #233837):
   hi cap «0,00» sencer. ⚠️ `!important`: el generador d'inputs (`objectesFormulari.php`) hi
   posa un `width` en línia —`calc(0.8rem + 4px + Nch)`, per als «12,45» de qualsevol altre
   formulari— i aquí mana la mida retallada de la graella, mai la fórmula genèrica. */
.po-cel input[name=valoracio]:not([type=hidden]) {
  box-sizing: border-box;
  width: 34px !important;
  min-width: 0;
  height: 26px;
  padding: 2px 2px;
  font-size: 11.5px;
  font-weight: 500;
}
.po-cel input[name=valoracio]:not([type=hidden])::placeholder {
  color: var(--fg-muted);
  font-style: italic;
  font-weight: 400;
  opacity: 1;
}
.po-cel input[name=valoracio]:not([type=hidden]):placeholder-shown {
  border-color: color-mix(in srgb, var(--color-avis) 55%, var(--color-border));
}

.po-cel .po-req-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  background: var(--surface);
  box-shadow: none;
  font: inherit;
  line-height: 1;
  color: var(--fg-muted);
  cursor: pointer;
}
.po-cel .po-req-btn i {
  font-size: 11px;
  cursor: inherit;
}
.po-cel .po-req-btn:focus:not(.maximized) {
  background: var(--surface);
}
.po-cel .po-req-btn:hover:not(:disabled) {
  color: var(--fg);
}
.po-cel .po-req-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.po-cel .po-req-btn:disabled {
  cursor: default;
}
.po-cel .po-req-btn.po-req-btn--si {
  border-color: var(--ok);
  background: var(--ok-soft);
  color: var(--ok-fg);
}
.po-cel .po-req-btn.po-req-btn--no {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger-fg);
}

/* Cel·la d'una acció del pla que diu una altra cosa que l'acció marc (#235796). */
.po-cel.po-cel--divergeix input[name=valoracio]:not([type=hidden]),
.po-cel.po-cel--divergeix .po-req-btn {
  outline: 2px solid var(--pending);
  outline-offset: 1px;
}
.po-cel.po-cel--divergeix input[name=valoracio]:not([type=hidden]) {
  background: var(--pending-soft);
  color: var(--pending-fg);
}

.po-cel .po-campana,
.po-graella .po-campanes,
#poSeleccio .po-campanes {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  box-shadow: none;
  font: inherit;
  line-height: 1;
  color: var(--fg-muted);
  cursor: pointer;
}
.po-cel .po-campana i,
.po-graella .po-campanes i,
#poSeleccio .po-campanes i {
  font-size: 12px;
  cursor: inherit;
}
.po-cel .po-campana:focus:not(.maximized),
.po-graella .po-campanes:focus:not(.maximized),
#poSeleccio .po-campanes:focus:not(.maximized) {
  background: none;
}
.po-cel .po-campana:hover, .po-cel .po-campana:focus-visible,
.po-graella .po-campanes:hover,
.po-graella .po-campanes:focus-visible,
#poSeleccio .po-campanes:hover,
#poSeleccio .po-campanes:focus-visible {
  color: var(--accent);
}
.po-cel .po-campana:focus-visible,
.po-graella .po-campanes:focus-visible,
#poSeleccio .po-campanes:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.po-cel .po-campana[hidden],
.po-graella .po-campanes[hidden],
#poSeleccio .po-campanes[hidden] {
  display: none;
}

.po-cel .po-campana .po-campana__capa {
  position: absolute;
  right: 0;
  bottom: -3px;
  width: auto;
  padding: 1px;
  border-radius: 50%;
  background: var(--surface);
  font-size: 8px;
  line-height: 1;
  pointer-events: none;
}

.po-cel .po-campana .po-campana__capa--si {
  color: var(--ok-fg);
}

.po-cel .po-campana .po-campana__capa--no {
  color: var(--danger-fg);
}

.po-requisits .asst-pill {
  white-space: nowrap;
}

.po-graella .po-ordre {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  box-shadow: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}
.po-graella .po-ordre i {
  flex: none;
  font-size: 0.85em;
  color: var(--fg-faint);
  cursor: inherit;
}
.po-graella .po-ordre.is-on {
  color: var(--fg);
}
.po-graella .po-ordre.is-on i {
  color: var(--accent);
}
.po-graella .po-ordre:hover, .po-graella .po-ordre:focus-visible {
  color: var(--accent);
}
.po-graella .po-ordre:focus:not(.maximized) {
  background: none;
}

.po-resultat {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: 2px;
  min-width: 0;
  font-size: 12px;
}
.po-resultat input,
.po-resultat textarea,
.po-resultat .ts-wrapper {
  box-sizing: border-box;
  height: 28px;
  min-height: 28px;
  font-size: 12px;
}
.po-resultat textarea {
  display: none;
  grid-column: 1/-1;
  resize: none;
}
.po-resultat.po-resultat--obert textarea {
  display: block;
}
.po-resultat textarea.po-resultat__notes {
  color: var(--color-text-2);
  background: color-mix(in srgb, var(--color-avis) 18%, var(--surface));
  border-color: var(--color-avis) !important;
  font-style: italic;
}
.po-resultat textarea.po-resultat__notes::placeholder {
  color: var(--color-avis-text);
  opacity: 1;
}

.po-barem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.po-barem i {
  flex: none;
  font-size: 12px;
  cursor: pointer;
}

.po-barem .ts-control,
.po-camps .ts-control,
.po-cel .ts-control,
.po-resultat .ts-control {
  height: 30px;
  padding: 2px 4px !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 7px;
  background: var(--surface);
}

.po-camps .ts-wrapper.multi .ts-control {
  height: auto;
  min-height: 30px;
}
.po-camps .ts-wrapper.multi .ts-control > input {
  flex: 1 1 3rem;
  min-width: 3rem;
}

.po-resultat .ts-control {
  box-sizing: border-box;
  height: 100%;
  align-items: center;
}

.po-resultat .ts-wrapper.single .ts-control > input::placeholder {
  color: var(--fg-muted);
  font-style: italic;
  opacity: 1;
}
.po-resultat .ts-wrapper.single .ts-control > .item {
  font-weight: 500;
}

.po-nom-enllac {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.po-nom-enllac:hover, .po-nom-enllac:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.po-docs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.po-doc {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.po-docs .po-doc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 22px;
}

.po-doc:not(.po-doc--pendent) {
  color: var(--ok-fg);
}

.po-doc.po-doc--pendent {
  color: var(--danger-fg);
}

.po-docs .po-doc-falta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 22px;
  color: var(--danger-fg);
  cursor: pointer;
}
.po-docs .po-doc-falta.po-doc-falta--si {
  color: var(--ok-fg);
}

.po-doc .po-doc__interrogant {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 0.25em 0 0;
  font-size: 0.55em;
  line-height: 1;
  pointer-events: none;
}

.po-docs .po-doc-verifica {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  background: var(--surface);
  box-shadow: none;
  font: inherit;
  line-height: 1;
  color: var(--fg-muted);
  cursor: pointer;
}
.po-docs .po-doc-verifica i {
  font-size: 11px;
  cursor: inherit;
}
.po-docs .po-doc-verifica:hover:not(:disabled) {
  color: var(--fg);
}
.po-docs .po-doc-verifica:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.po-docs .po-doc-verifica:disabled {
  cursor: default;
}
.po-docs .po-doc-verifica.po-doc-verifica--si {
  border-color: var(--ok);
  background: var(--ok-soft);
  color: var(--ok-fg);
}
.po-docs .po-doc-verifica.po-doc-verifica--no {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger-fg);
}

.po-docs {
  position: relative;
}

.po-docs .po-doc-n {
  appearance: none;
  position: absolute;
  top: -4px;
  left: 11px;
  min-width: 13px;
  height: 13px;
  margin: 0;
  padding: 0 3px;
  border: 0;
  border-radius: 7px;
  background: var(--accent);
  box-shadow: none;
  color: var(--accent-fg);
  font-family: inherit;
  font-size: 9px;
  font-weight: 600;
  line-height: 13px;
  text-align: center;
  cursor: pointer;
  z-index: 1;
}
.po-docs .po-doc-n:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.po-accions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.po-paginacio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: 13px;
}
/* Minimalista (#233838): els botons (fletxes, números i mida de pàgina) pugen sense marc ni
   fons; el ressó del «hover» és un sòl neutral i la pàgina activa es diu en negreta, sense
   la píldora primària. La fletxa desactivada, quasi invisible. */
.po-paginacio .asst-btn {
  height: auto;
  padding: 2px 6px;
  border: 0;
  border-radius: var(--r-btn);
  background: none;
  color: var(--fg-muted);
}
.po-paginacio .asst-btn:hover:not(:disabled) {
  color: var(--fg);
  background: var(--surface-2);
}
/* ⚠️ Dins de l'àmbit, per guanyar `.asst-btn:disabled` de `assistents.scss`, que el
   pintava com un botó inactiu amb fons i vora. */
.po-paginacio .asst-btn:disabled {
  background: none;
  border: 0;
  color: var(--fg-faint);
  opacity: 0.45;
}
/* La pàgina activa perdia tota la píldora primària: queda el nombre, pesat. */
.po-paginacio .asst-btn--primari {
  color: var(--fg);
  font-weight: 600;
}
.po-paginacio .po-paginacio__num {
  min-width: 26px;
}
/* «Per pàgina» com un seg sense marc: la mida triada, en negreta, semblant a la pàgina activa
   de la navegació. */
.po-paginacio .po-paginacio__mida .asst-seg {
  padding: 0;
  border: 0;
  background: none;
  gap: 0;
}
.po-paginacio .po-paginacio__mida .asst-seg__btn {
  padding: 2px 7px;
  font-weight: 400;
}
.po-paginacio .po-paginacio__mida .asst-seg__btn.is-on {
  background: none;
  box-shadow: none;
  color: var(--fg);
  font-weight: 700;
}
/* Centrat de la navegació (#233838): el rang de files i la mida de pàgina tenen el mateix pes
   (1fr cadascun) i la navegació queda al centre horitzontal de la fila. El recompte
   monoespaixat (`.po-num`, 12px) puja una línia de 21px, com els botons, alinear-lo. */
.po-paginacio > .po-num {
  flex: 1 1 0;
  line-height: 21px;
}
.po-paginacio > .po-paginacio__nav {
  justify-content: center;
}
.po-paginacio > .po-paginacio__mida {
  margin-left: 0;
  flex: 1 1 0;
  justify-content: flex-end;
  /* El rètol «Per pàgina» (asst-label, 12px) i els números (13px, amb rellotge de 2px)
     comparteixen la LÍNIA de base, no la caixa: alineats pels centres quedaven dos píxels
     desplaçats (#233838). */
  align-items: baseline;
}

.po-paginacio__nav,
.po-paginacio__mida {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.po-paginacio__mida {
  margin-left: auto;
}

.po-paginacio__num {
  min-width: 30px;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.po-paginacio__salt {
  color: var(--fg-muted);
}

.po-seltotes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 13px;
  background: var(--surface-2);
}
.po-seltotes[hidden] {
  display: none;
}

#poSeleccio .asst-taula__tr:hover {
  background: none;
}

.po-sel-docs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px 20px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
}

.po-sel-docs__item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 0;
  max-width: 320px;
  font-size: 12px;
}

.po-sel-docs__sigles {
  flex: none;
  color: var(--fg);
  font-weight: 700;
}

.po-sel-docs__desc {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--fg-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.po-sel-docs__item > .po-docs {
  flex: none;
}

.po-sel-fase {
  border: 1px solid var(--border-soft);
  border-radius: var(--r-card);
  margin-bottom: 8px;
}

.po-sel-fase:last-child {
  margin-bottom: 0;
}

.po-sel-fase > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
  list-style: none;
}

.po-sel-fase__nom {
  flex: 1;
  min-width: 0;
}

.po-sel-fase > summary::-webkit-details-marker {
  display: none;
}

.po-sel-fase > summary::marker {
  content: "";
}

.po-sel-fase[open] > summary {
  color: var(--fg);
  border-bottom: 1px solid var(--border-soft);
}

.po-sel-fase__fletxa {
  font-size: 11px;
  transition: transform 0.15s;
}

.po-sel-fase[open] > summary .po-sel-fase__fletxa {
  transform: rotate(180deg);
}

.po-sel-fase__cos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 14px 10px;
}

.po-sel-item {
  display: grid;
  grid-template-columns: max(1.6rem, 24px) max(2.4rem, 40px) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-soft);
}
.po-sel-item:last-child {
  border-bottom: none;
}
.po-sel-item:hover {
  background: var(--surface-2);
}

.po-sel-item .po-cel {
  display: contents;
}

.po-sel-item .po-cel > .po-campana,
.po-sel-item .po-cel > i.textAlerta,
.po-sel-item .po-cel > i.fa-eye {
  grid-row: 1;
  grid-column: 1;
}

.po-sel-item .po-cel > input[name=valoracio]:not([type=hidden]),
.po-sel-item .po-cel > .po-req-btn {
  grid-row: 1;
  grid-column: 2;
}

.po-sel-item__info {
  grid-row: 1;
  grid-column: 3;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.po-sel-item__nom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.po-sel-item__escala {
  flex: none;
  font-size: 12px;
  color: var(--fg-muted);
}

.po-sel-total {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-weight: 600;
}

.po-sel-total + .po-sel-total {
  margin-top: 0.25em;
  padding-top: 0;
  border-top: none;
  font-weight: 400;
}

.po-sel-accio {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.5em;
  padding: 0.25em 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--fg-muted);
}

.po-sel-resultats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.po-sel-resultats__titol {
  font-weight: 600;
}

.po-sel-resultat {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) 4.5rem minmax(16rem, 2fr);
  align-items: start;
  gap: 8px;
}
.po-sel-resultat .po-resultat {
  grid-template-columns: 96px minmax(0, 1fr);
  min-height: 28px;
}

.po-sel-resultat__total {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 28px;
  font-weight: 600;
}

.po-sel-resultat__accio {
  display: flex;
  align-items: center;
  gap: 0.5em;
  min-height: 28px;
  min-width: 0;
  overflow: hidden;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--fg-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.po-al {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.po-al__pla + .po-al__pla {
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}

.po-al__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 6px;
}

.po-al__apunt {
  margin: 6px 0;
  padding: 6px 10px;
  border-left: 3px solid var(--border);
  background: var(--surface-2);
}

.po-al__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  color: var(--fg-muted);
  font-size: 12px;
}

.po-al__text {
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.po-al__pill {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.po-al__pill--pendent {
  background: var(--pending-soft);
  color: var(--pending-fg);
}

.po-al__pill--ok {
  background: var(--ok-soft);
  color: var(--ok-fg);
}

.po-al__docs {
  margin: 6px 0;
  padding-left: 18px;
}

.po-al__docs li {
  margin: 2px 0;
}

.po-al__desc,
.po-al__buit {
  margin-left: 6px;
  color: var(--fg-muted);
  font-size: 12px;
}

.po-al__buit {
  margin-left: 0;
}

.po-al__enllac {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
}

.po-al__enllac input {
  flex: 1 1 auto;
  min-width: 0;
}

.po-al__copia.is-fet {
  color: var(--ok-fg);
}

.po-al-comprovacions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.po-al-comprovacio > i {
  width: 16px;
  margin-right: 6px;
  text-align: center;
}

.po-al-comprovacio--ok > i {
  color: var(--ok-fg);
}

.po-al-comprovacio--avis > i {
  color: var(--pending-fg);
}

.po-al-comprovacio--error {
  color: var(--danger-fg);
}

.po-avis-canvis-web {
  align-items: center;
}
.po-avis-canvis-web .asst-btn {
  flex: none;
  white-space: nowrap;
}

.po-canvis-web {
  flex: none;
}

.mp-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
}

@media (max-width: 900px) {
  .mp-cols {
    grid-template-columns: 1fr;
  }
}
.mp-mapa {
  display: flex;
  height: calc(100vh - 260px);
  min-height: 420px;
  overflow: hidden;
  border-radius: 0 0 var(--r-card) var(--r-card);
}

.xa-inici {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.xa-inici:hover .asst-topbar-title {
  color: var(--accent);
}

@media (max-width: 720px) {
  .xa-apartats {
    order: 10;
  }
  .xa-apartats__titol {
    display: none;
  }
}
.xa-mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
}

.xa-trenca {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.xa-valor {
  min-height: var(--h-input);
  display: flex;
  align-items: center;
  font-size: 14px;
}

.xa-copiable {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  text-align: left;
}

.xa-copia {
  flex: none;
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.xa-resum-net {
  border: 0;
  border-radius: 0 0 var(--r-card) var(--r-card);
  box-shadow: none;
}

.xa-fila-camp {
  display: flex;
  gap: 8px;
  align-items: center;
}
.xa-fila-camp .asst-input {
  flex: 1 1 auto;
  min-width: 0;
}
.xa-fila-camp .asst-btn {
  flex: none;
}

.xa-botons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.xa-botons--esquerra {
  justify-content: flex-start;
}

.xa-dreceres {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.xa-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

@media (max-width: 900px) {
  .xa-cols {
    grid-template-columns: 1fr;
  }
}
.xa-alta-ajuda {
  flex: 1 1 100%;
  max-width: none;
}

.xa-uneix__invitacio {
  flex: 1 1 100%;
}
.xa-uneix__invitacio .asst-ajuda {
  max-width: none;
}

.xa-uneix__ma {
  flex: 1 1 100%;
}
.xa-uneix__ma > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
}

.xa-uneix__camps {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.xa-invitacio {
  border-top: 1px solid var(--border);
}
.xa-invitacio .asst-ajuda {
  max-width: none;
}
.xa-invitacio .asst-textarea {
  flex: 1 1 auto;
  min-width: 0;
}

.xa-invitacions {
  --asst-cols: minmax(0, 1.4fr) 0.8fr minmax(0, 1.4fr) 48px;
}

.xa-alta-ma > summary {
  cursor: pointer;
  list-style: none;
}
.xa-alta-ma > summary::-webkit-details-marker {
  display: none;
}

.xa-alta-ma:not([open]) > summary {
  border-bottom: 0;
}

.xa-guia {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-muted);
}
.xa-guia b {
  color: var(--fg);
}

.xa-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.xa-cap {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--fg);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.xa-chks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

.xa-avis-text {
  color: var(--danger-fg);
}

.xa-xarxes {
  --asst-cols: minmax(0, 2.4fr) minmax(0, 1fr) 0.6fr minmax(0, 1fr);
}

.xa-xarxes__fila {
  text-decoration: none;
  color: var(--fg);
  cursor: pointer;
}

.xa-roster {
  --asst-cols: minmax(0, 1.6fr) minmax(0, 1.8fr) 0.7fr minmax(0, 1.6fr) 72px;
}

.xa-roster__jo {
  background: var(--surface-2);
}

.xa-roster__accions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.xa-historic {
  --asst-cols: 1.3fr 1.3fr 0.8fr 0.8fr 90px;
}

@media (max-width: 720px) {
  .xa-xarxes,
  .xa-roster,
  .xa-invitacions,
  .xa-historic {
    --asst-cols: 1fr;
  }
  .xa-xarxes .asst-taula__th,
  .xa-roster .asst-taula__th,
  .xa-invitacions .asst-taula__th,
  .xa-historic .asst-taula__th {
    display: none;
  }
  .xa-roster__accions {
    justify-content: flex-start;
  }
}
a.xa-xarxes__fila:link,
a.xa-xarxes__fila:visited,
a.xa-xarxes__fila:hover,
.xa-tria {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.xa-tria__opcio {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 13px;
  cursor: pointer;
}
.xa-tria__opcio:hover {
  background: var(--surface-2);
}
.xa-tria__opcio small {
  color: var(--fg-muted);
}

.xa-filtres {
  align-items: flex-end;
}
.xa-filtres .asst-alta__camp {
  flex: 1 1 14em;
}
.xa-filtres .asst-alta__camp--auto {
  flex: 0 0 auto;
}

.xa-any {
  width: 7em !important;
}

.xa-scroll {
  overflow-x: auto;
}

.xa-taula {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.xa-taula th,
.xa-taula td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-soft);
  text-align: right;
  white-space: nowrap;
}
.xa-taula th {
  background: var(--surface-2);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.xa-taula th:first-child,
.xa-taula td:first-child {
  text-align: left;
  white-space: normal;
  min-width: 16em;
}
.xa-taula tbody tr:hover {
  background: var(--surface-2);
}
.xa-taula tbody tr:last-child td {
  border-bottom: 0;
}

.xa-taula__total {
  font-weight: 700;
}

.xa-taula__aporta {
  display: block;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--fg-muted);
}

.xa-notes {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-muted);
}
.xa-notes p {
  margin: 0;
}

.xa-infografia {
  overflow-x: auto;
}

.xa-app--trasllats .asst-body {
  display: flex;
  padding: 0;
  overflow: hidden;
}
.xa-app--trasllats .asst-content {
  display: flex;
  flex: 1 1 auto;
  max-width: none;
}

.xa-iframe {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: 0;
  background: var(--bg);
  visibility: hidden;
}
.xa-iframe.is-carregat {
  visibility: visible;
}

html.xa-incrustat body {
  background: var(--bg);
}
html.xa-incrustat .cs-boto-flotant {
  display: none;
}
html.xa-incrustat #dades.grid {
  gap: 16px;
  padding: 16px;
  background: var(--bg);
}
html.xa-incrustat #dades .apartat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
html.xa-incrustat #dades .titolApartat {
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}
html.xa-incrustat #dades table th {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
html.xa-incrustat #dades select,
html.xa-incrustat #dades input[type=text] {
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--fg);
}
html.xa-incrustat #dades button {
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--fg);
  font-weight: 600;
  cursor: pointer;
}
html.xa-incrustat #dades .trEstat {
  border-radius: var(--r-pill);
  padding: 2px 9px;
  font-weight: 600;
}

#dades.tc-main {
  grid-template-columns: minmax(0, 1fr);
}

.tc-app {
  min-width: 0;
}

.tc-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 820px) {
  .tc-cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tc-centre select {
  min-width: 14em;
}

@media (max-width: 620px) {
  .tc-app .asst-topbar {
    flex-wrap: wrap;
    height: auto;
    row-gap: 8px;
    padding-block: 8px;
  }
  .tc-centre select {
    min-width: 0;
  }
}
.tc-torn__numero {
  font-size: 88px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}

.tc-prefix {
  margin-right: 0.12em;
  color: var(--fg-muted);
  font-weight: 500;
}

.tc-codi {
  margin-left: 0.35em;
  font-size: 0.45em;
  font-weight: 600;
  color: var(--fg-muted);
  letter-spacing: 0.03em;
}

.tc-torn__cua {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 600;
}

.tc-torn__info {
  min-height: 1.4em;
  margin-top: 4px;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

.tc-persona {
  margin-top: 16px;
  max-width: 460px;
}

.tc-persona__vinculada {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.tc-cites {
  margin: 8px 0 0;
  padding: 8px 12px;
  list-style: none;
  border-radius: var(--r-btn);
  background: var(--applied-soft, var(--surface-2));
  font-size: 13px;
}

.tc-persona__resultats {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  border-radius: var(--r-btn);
  overflow: hidden;
}
.tc-persona__resultats:not(:empty) {
  border: 1px solid var(--border);
}

.tc-persona__opcio {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tc-persona__opcio:hover {
  background: var(--surface-2);
}

.tc-persona__cap {
  padding: 8px 12px;
  color: var(--fg-muted);
}

.tc-accions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.tc-seguent {
  flex-basis: 100%;
  justify-content: center;
  height: 52px;
  font-size: 16px;
}

.tc-cues__titol {
  margin-top: 16px;
}

.tc-cues {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.tc-cua {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
}
.tc-cua:last-child {
  border-bottom: 0;
}

.tc-cua__nom {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  cursor: pointer;
}

.tc-filtres__b {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 12px;
}

.tc-camp {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.tc-camp .asst-label {
  margin: 0;
}

.tc-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.tc-kpi {
  padding: 14px 18px;
}

.tc-kpi__rotul {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
}

.tc-kpi__valor {
  margin-top: 4px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.tc-graella {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr));
  gap: 16px;
  align-items: start;
}

.tc-est {
  --asst-cols: minmax(0, 1.3fr) 64px minmax(60px, 1fr) 56px 60px 60px;
}
.tc-est.tc-est--tiquets {
  --asst-cols: minmax(0, 1.3fr) 64px 70px minmax(60px, 1fr) 56px 60px 60px;
}
.tc-est.tc-est--motius {
  --asst-cols: minmax(0, 1fr) minmax(0, 1.4fr) 64px minmax(60px, 0.8fr);
}

.tc-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tc-barra {
  display: block;
  width: var(--tc-pct, 0%);
  min-width: 2px;
  height: 8px;
  border-radius: 0 4px 4px 0;
  background: var(--accent);
}

.tc-buit {
  color: var(--fg-muted);
}

.tc-espera {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.tc-espera__motiu {
  margin: 4px 0 8px;
  font-weight: 600;
}

.tc-espera__llista {
  margin: 4px 0 10px;
  padding: 0;
  list-style: none;
}
.tc-espera__llista li {
  padding: 3px 0;
}

.tc-espera__actual,
.tc-espera__nota {
  color: var(--fg-muted);
}

.tc-espera__nota {
  margin: 6px 0 0;
}

.tc-espera [hidden],
.tc-espera[hidden] {
  display: none !important;
}

.tc-recepcio {
  width: min(560px, 100vw - 32px);
}

.tc-recepcio__cami {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.tc-recepcio__cami:empty {
  display: none;
}

.tc-recepcio__pas {
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--fg);
  font-size: 12px;
  font-weight: 600;
}

.tc-recepcio__opcions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

.tc-recepcio__opcio {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.tc-recepcio__opcio:hover, .tc-recepcio__opcio:focus-visible {
  border-color: var(--accent);
  background: var(--surface-2);
  outline: none;
}

.tc-recepcio__num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--fg-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.tc-recepcio__final {
  margin-left: auto;
  color: var(--fg-muted);
}

.tc-citesApartats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
  align-items: start;
}

.tc-citesCard[hidden] {
  display: none !important;
}

.tc-citesCard .asst-card__titol i {
  margin-right: 4px;
  color: var(--fg-muted);
}

.tc-citesLlista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tc-citaFila {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--surface);
}
.tc-citaFila.is-hora {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 2px var(--accent);
  animation: tc-cita-hora 2s ease-in-out 3;
}

@keyframes tc-cita-hora {
  50% {
    box-shadow: 0 0 0 4px var(--accent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tc-citaFila.is-hora {
    animation: none;
  }
}
.tc-citaFila__hora {
  flex: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tc-citaFila__cos {
  flex: 1;
  min-width: 0;
}

.tc-citaFila__dades {
  color: var(--fg-muted);
}

.tc-citaFila__num {
  flex: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.asst-app.inf-cap {
  --h-topbar: 48px;
  --h-btn: 32px;
  --h-btn-sm: 28px;
  --r-card: 4px;
  --r-btn: 6px;
  --border: var(--color-border);
  height: auto;
  margin: 0.5rem;
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  font-family: var(--font-family), sans-serif;
  font-size: 1rem;
}

.inf-cap .asst-topbar {
  padding: 0 1rem;
  border-radius: var(--r-card) var(--r-card) 0 0;
}

.inf-cap .asst-topbar-title {
  font-size: 1.15rem;
}

.inf-cap .asst-btn,
.inf-cap .asst-input {
  font-size: 0.9rem;
}

.inf-cerca {
  position: relative;
  flex: 0 1 360px;
  min-width: 160px;
  margin: 0 0 0 12px;
}
.inf-cerca > i {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--fg-faint);
  pointer-events: none;
}
.inf-cerca > .asst-input {
  width: 100%;
  height: var(--h-btn);
  padding-left: 34px;
}

.inf-comptador {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-fg);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
}

.inf-desats {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fg-muted);
}
.inf-desats > select,
.inf-desats > .ts-wrapper {
  width: 200px;
  min-width: 0;
}
.inf-desats > .ts-wrapper {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: var(--h-btn);
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--fg);
  font-size: 0.9rem;
}
.inf-desats i {
  cursor: pointer;
}

.inf-cercador #cercaNouFiltres,
.inf-cercador #cercaNouFiltres > div,
.inf-cercador #cercaNouFiltres form#formulari {
  display: contents;
}

.inf-cercador #cercaNouFiltres > header,
.inf-cercador #cercaNouFiltres form#formulari > .dada,
.inf-cercador #cercaNouFiltres form#formulari > .filtres {
  display: none;
}

.inf-cercador .filtres-modal {
  display: contents;
}

.inf-tipus {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 1rem;
}

.inf-tipus__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--h-btn-sm);
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--fg-muted);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}
.inf-tipus__btn:hover {
  border-color: var(--border-strong);
  color: var(--fg);
}
.inf-tipus__btn.is-on {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-fg);
}
.inf-tipus__btn.is-on .inf-comptador {
  background: var(--accent-fg);
  color: var(--accent);
}
.inf-tipus__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.inf-valor {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.inf-valor--buit,
.inf-valor--grups {
  color: var(--fg-faint);
  font-weight: 400;
}

.inf-valor__quan {
  display: block;
  color: var(--fg-faint);
  font-size: 11px;
}

.inf-tipus__color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--surface);
}

.inf-tipus__sep {
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: var(--border);
}

.inf-actius {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0 1rem 0.5rem;
}
.inf-actius[hidden] {
  display: none;
}

.inf-actiu {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  height: var(--h-btn-sm);
  padding: 0 4px 0 10px;
  border: 1px solid var(--applied);
  border-radius: var(--r-pill);
  background: var(--applied-soft);
  color: var(--applied-fg);
  font-size: 0.85rem;
}

.inf-actiu__etiqueta {
  opacity: 0.8;
  white-space: nowrap;
}

.inf-actiu__valor {
  overflow: hidden;
  max-width: 320px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inf-actiu__treu {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.inf-actiu__treu:hover {
  background: var(--applied);
  color: var(--accent-fg);
}
.inf-actiu__treu:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.ll-camp {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 0;
  min-width: 0;
}

.ll-camp--auto {
  flex: 0 0 auto;
}

.ll-graella {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}

.ll-fila {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ll-fila__etiqueta {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}

.ll-fila__camps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 800px) {
  .ll-fila__camps {
    grid-template-columns: 1fr;
  }
}
.ll-comptador {
  float: right;
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

.ll-comptador.is-excedit {
  color: var(--danger-fg);
  font-weight: 700;
}

.ll-bloc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-card);
  background: var(--surface-2);
}

.ll-bloc__titol {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-muted);
}

.ll-pastilla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.ll-canal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-card);
  background: var(--surface-2);
}

.ll-canal__cap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ll-canal__icona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-btn);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  flex: none;
}

.ll-canal__nom {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.ll-canal__nom small {
  color: var(--fg-muted);
  font-size: 12px;
}

.ll-canal__cos {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-left: 40px;
}

.ll-canal__url {
  font-size: 12px;
  font-family: monospace;
  color: var(--fg-muted);
  word-break: break-all;
  margin-right: auto;
}

.imatge-quadriculat {
  background: repeating-conic-gradient(#bdbdbd 0% 25%, #8c8c8c 0% 50%) 50%/16px 16px;
}

.graella:has(.card-imatge) {
  height: auto;
  grid-auto-rows: min-content;
}

.card-imatge {
  position: relative;
  aspect-ratio: 4/3;
  align-self: start;
  margin-bottom: 1em;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  background-color: var(--color-fons-2);
  cursor: pointer;
}
.card-imatge > i {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--color-border);
}
.card-imatge.card-imatge-sense > i, .card-imatge:not(:has(img)) > i {
  display: flex;
}
.card-imatge img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: repeating-conic-gradient(#bdbdbd 0% 25%, #8c8c8c 0% 50%) 50%/16px 16px;
}
.card-imatge .card-imatge-peu {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 24px 8px 6px;
  font-size: 12px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 55%, transparent 100%);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-imatge:hover {
  outline: 2px solid var(--color1);
}
.card-imatge.card-imatge-baixa img {
  opacity: 0.5;
}
.card-imatge.card-imatge-sense img {
  display: none;
}
.card-imatge.card-imatge-svg img {
  object-fit: contain;
  padding: 8px;
}

.ai-app {
  --ai-accent: var(--apl-primary, #6b9b58);
  --ai-accent-dark: color-mix(in oklab, var(--ai-accent) 86%, black);
  --ai-accent-text: color-mix(in oklab, var(--ai-accent) 52%, black);
  --ai-accent-link: color-mix(in oklab, var(--ai-accent) 76%, black);
  --ai-accent-border: color-mix(in oklab, var(--ai-accent) 42%, white);
  --ai-accent-tint: color-mix(in oklab, var(--ai-accent) 15%, white);
  --ai-accent-tint-2: color-mix(in oklab, var(--ai-accent) 24%, white);
  --ai-accent-wash: color-mix(in oklab, var(--ai-accent) 7%, white);
  --ai-fg: #23231f;
  --ai-fg-2: #4a4942;
  --ai-fg-3: #78776f;
  --ai-fg-4: #8b8a82;
  --ai-fg-5: #9d9c94;
  --ai-fg-cos: #3b3a34;
  --ai-fg-canal: #57564f;
  --ai-surface: #fff;
  --ai-surface-2: #fafaf8;
  --ai-surface-3: #fbfbfa;
  --ai-hover: #fbfbf9;
  --ai-hover-2: #f6f6f4;
  --ai-btn-hover: #f0efeb;
  --ai-border: #e2e1dd;
  --ai-border-2: #dedcd7;
  --ai-border-3: #e6e4df;
  --ai-border-4: #f0efeb;
  --ai-border-5: #ececE7;
  --ai-border-camp: #d8d6d0;
  --ai-border-strong: #c9c7c1;
  --ai-xip: #f4f4f1;
  --ai-xip-2: #fcfcfb;
  --ai-treb-tint: #fdf2e4;
  --ai-treb-border: #e8c99a;
  --ai-treb-text: #8a5a12;
  --ai-comptador: #efeeea;
  --ai-sens-fons: #f7efe1;
  --ai-sens-vora: #e6d3b3;
  --ai-sens-text: #7a5820;
  --ai-sens-check: #a8802f;
  --ai-perill: #9a3a2c;
  --ai-perill-fons: #fbefec;
  --ai-ombra-card: 0 1px 2px rgba(35, 35, 31, .04);
  --ai-ombra-menu: 0 6px 18px rgba(35, 35, 31, .14);
  --ai-ombra-modal: 0 18px 48px rgba(20, 20, 16, .28);
  --ai-cols: minmax(118px, 1.2fr) 94px 106px 94px 50px minmax(180px, 1.9fr) 40px;
  --ai-h-camp: 35px;
  --ai-fletxa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238b8a82' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color: var(--ai-fg);
}
.ai-app [hidden] {
  display: none !important;
}
.ai-app [onclick] {
  cursor: pointer;
}

html.dark .ai-app {
  --ai-accent-dark: color-mix(in oklab, var(--ai-accent) 80%, white);
  --ai-accent-text: color-mix(in oklab, var(--ai-accent) 62%, white);
  --ai-accent-link: color-mix(in oklab, var(--ai-accent) 72%, white);
  --ai-accent-border: color-mix(in oklab, var(--ai-accent) 46%, #2a2e32);
  --ai-accent-tint: color-mix(in oklab, var(--ai-accent) 26%, #2a2e32);
  --ai-accent-tint-2: color-mix(in oklab, var(--ai-accent) 36%, #2a2e32);
  --ai-accent-wash: color-mix(in oklab, var(--ai-accent) 12%, #2a2e32);
  --ai-fg: var(--color-clar-2);
  --ai-fg-2: var(--color-clar-3);
  --ai-fg-3: #a6a49c;
  --ai-fg-4: #97958d;
  --ai-fg-5: #8b8981;
  --ai-fg-cos: var(--color-clar-3);
  --ai-fg-canal: var(--color-clar-3);
  --ai-surface: var(--color-fosc-2);
  --ai-surface-2: #23272a;
  --ai-surface-3: #23272a;
  --ai-hover: #31363a;
  --ai-hover-2: #31363a;
  --ai-btn-hover: #3a4045;
  --ai-border: var(--color-fosc-4);
  --ai-border-2: var(--color-fosc-4);
  --ai-border-3: var(--color-fosc-3);
  --ai-border-4: var(--color-fosc-3);
  --ai-border-5: var(--color-fosc-3);
  --ai-border-camp: var(--color-fosc-4);
  --ai-border-strong: #5c6165;
  --ai-xip: var(--color-fosc-3);
  --ai-xip-2: #34383b;
  --ai-treb-tint: #3a3325;
  --ai-treb-border: #6b5730;
  --ai-treb-text: #e3c489;
  --ai-comptador: var(--color-fosc-3);
  --ai-sens-fons: #4a3a1c;
  --ai-sens-vora: #6d5527;
  --ai-sens-text: #e8cf9d;
  --ai-perill: #e08d7d;
  --ai-perill-fons: #452824;
  --ai-ombra-card: 0 1px 2px rgba(0, 0, 0, .3);
  --ai-ombra-menu: 0 6px 18px rgba(0, 0, 0, .45);
  --ai-ombra-modal: 0 18px 48px rgba(0, 0, 0, .6);
}

article.apartat.ai-app {
  padding: 0;
  overflow: auto;
  box-shadow: var(--ai-ombra-card);
  background: var(--ai-surface);
  border-color: var(--ai-border);
  display: block;
}

.ai-card {
  min-width: 790px;
  display: flex;
  flex-direction: column;
}

#dades .apartat.ai-app > .ai-card {
  overflow: visible;
}

.ai-cap {
  padding: 18px 22px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 24px;
}

.ai-cap__tit {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 260px;
}

.ai-cap__linia {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.ai-cap h1 {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ai-fg);
}

.ai-cap__persona {
  font-size: 13px;
  color: var(--ai-fg-4);
}

.ai-resum {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--ai-fg-2);
  margin-top: 2px;
}
.ai-resum > span {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 0 14px;
  border-left: 1px solid var(--ai-border-3);
}
.ai-resum > span:first-child {
  padding-left: 0;
  padding-right: 14px;
  border-left: 0;
}
.ai-resum b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ai-resum .ai-resum__xifra {
  font-size: 16px;
}
.ai-resum .ai-resum__et {
  color: var(--ai-fg-4);
}

.ai-barra {
  padding: 16px 22px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ai-barra__et {
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ai-fg-5);
  margin-right: 2px;
}

.ai-any {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--ai-accent-tint);
  border: 1px solid var(--ai-accent-border);
  color: var(--ai-accent-text);
  border-radius: 15px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.ai-any:hover {
  background: var(--ai-accent-tint-2);
}
.ai-any .ai-any__n {
  background: var(--ai-accent);
  color: #fff;
  border-radius: 9px;
  min-width: 20px;
  padding: 0 5px;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  line-height: 17px;
}
.ai-any[aria-pressed=false] {
  background: var(--ai-surface);
  border-color: var(--ai-border-2);
  color: var(--ai-fg-4);
  font-weight: 400;
}
.ai-any[aria-pressed=false] .ai-any__n {
  background: var(--ai-comptador);
  color: var(--ai-fg-4);
  font-weight: 400;
}
.ai-any[aria-pressed=false]:hover {
  background: var(--ai-hover-2);
  color: var(--ai-fg-2);
}

.ai-any--tots {
  margin-right: 4px;
}

.ai-barra__accions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.ai-btn {
  border: 1px solid var(--ai-border-2);
  background: var(--ai-surface);
  color: var(--ai-fg-2);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ai-btn:hover {
  background: var(--ai-hover-2);
  border-color: #c9c7c1;
}
.ai-btn .ai-btn__glif {
  font-size: 10px;
  color: var(--ai-fg-4);
}
.ai-btn[aria-expanded=true] {
  border-color: var(--ai-accent-border);
  background: var(--ai-accent-tint);
  color: var(--ai-accent-text);
  font-weight: 600;
}
.ai-btn[aria-expanded=true]:hover {
  background: var(--ai-accent-tint-2);
}
.ai-btn[aria-expanded=true] .ai-btn__glif {
  color: var(--ai-accent);
}

.ai-btn--primari {
  border: 1px solid var(--ai-accent-dark);
  background: var(--ai-accent);
  color: #fff;
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ai-btn--primari:hover {
  background: var(--ai-accent-dark);
  border-color: var(--ai-accent-dark);
  color: #fff;
}

.ai-taula {
  margin-top: 16px;
  border-top: 1px solid var(--ai-border-3);
}

.ai-apunt, .ai-filtres, .ai-thead {
  display: grid;
  grid-template-columns: var(--ai-cols);
  gap: 0 8px;
  padding: 13px 22px;
}

.ai-thead {
  align-items: end;
  padding: 11px 22px 9px;
  background: var(--ai-surface-2);
  border-bottom: 1px solid var(--ai-border-2);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ai-fg-3);
  font-weight: 600;
}
.ai-thead .ar {
  text-align: right;
}
.ai-thead .ai-th {
  display: flex;
  align-items: baseline;
  gap: 5px;
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.ai-thead .ai-th.ar {
  justify-content: flex-end;
}
.ai-thead .ai-th:hover, .ai-thead .ai-th.is-ordenat {
  color: var(--ai-fg);
}
.ai-thead .ai-th__ord {
  font-size: 8px;
  line-height: 1;
  color: var(--ai-accent);
}
.ai-thead .ai-th__ord:empty {
  display: none;
}

.ai-filtres {
  align-items: start;
  gap: 8px;
  padding: 10px 22px;
  background: var(--ai-accent-wash);
  border-bottom: 1px solid var(--ai-border-3);
}
.ai-filtres .ai-filtres__col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ai-filtres input,
.ai-filtres select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--ai-border-camp);
  border-radius: 3px;
  padding: 4px 6px;
  font-size: 12.5px;
  color: var(--ai-fg-2);
  background: var(--ai-surface);
}
.ai-filtres input.ar {
  text-align: right;
}
.ai-filtres .ai-filtres__tanca {
  display: flex;
  justify-content: flex-end;
}
.ai-filtres .ai-filtres__tanca button {
  border: 1px solid var(--ai-border-camp);
  background: var(--ai-surface);
  color: var(--ai-fg-3);
  border-radius: 3px;
  width: 24px;
  height: 24px;
  line-height: 1;
  cursor: pointer;
}
.ai-filtres .ai-filtres__tanca button:hover {
  background: #efefec;
}

.ai-apunt {
  align-items: start;
  border-bottom: 1px solid var(--ai-border-4);
  font-size: 13.5px;
  line-height: 1.4;
}
.ai-apunt:hover {
  background: var(--ai-hover);
}
.ai-apunt[hidden] {
  display: none;
}

.ai-cel {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ai-accio {
  font-size: 14px;
  font-weight: 600;
  color: var(--ai-fg);
  text-wrap: pretty;
}

.ai-sub {
  font-size: 12px;
  color: var(--ai-fg-4);
}

.ai-data {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--ai-fg);
}

.ai-hores {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--ai-fg);
}

.ai-canal {
  color: var(--ai-fg-canal);
}

.ai-marques {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  color: var(--ai-fg-4);
  font-size: 12px;
}
.ai-marques i {
  cursor: pointer;
}
.ai-marques a {
  color: inherit;
}

.ai-cel--tipus {
  align-items: flex-start;
  gap: 2px;
}

.ai-xip {
  display: inline-block;
  background: var(--ai-xip);
  border: 1px solid var(--ai-border-3);
  color: var(--ai-fg-2);
  border-radius: 3px;
  padding: 1px 7px;
  font-size: 12px;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.ai-xip--clau {
  background: var(--ai-accent-tint);
  border-color: var(--ai-accent-border);
  color: var(--ai-accent-text);
  font-weight: 600;
}

.ai-xip--silenci {
  background: var(--ai-xip-2);
  color: var(--ai-fg-3);
}

.ai-xip--tipus {
  background: transparent;
  border-color: transparent;
  padding-left: 0;
  color: var(--ai-fg-2);
  font-weight: 600;
}

.ai-xip--treballadora {
  background: var(--ai-treb-tint);
  border-color: var(--ai-treb-border);
  color: var(--ai-treb-text);
}

.ai-sub__mateixa {
  color: var(--ai-treb-text);
  font-style: italic;
}

.ai-cel--coment {
  min-width: 0;
  color: var(--ai-fg-cos);
}

.ai-etiquetes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 4px;
}

.ai-et-sens {
  display: inline-block;
  background: var(--ai-sens-fons);
  border: 1px solid var(--ai-sens-vora);
  color: var(--ai-sens-text);
  border-radius: 3px;
  padding: 1px 7px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.ai-coment {
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.ai-coment.ai-coment--clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ai-coment p {
  margin: 0;
}

.ai-coment__mes {
  margin-top: 3px;
  border: 0;
  background: none;
  padding: 0;
  font-size: 12.5px;
  color: var(--ai-accent-link);
  cursor: pointer;
  font-weight: 600;
}
.ai-coment__mes:hover {
  color: var(--ai-accent-text);
}

.ai-cel--menu {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.ai-menu__btn {
  border: 1px solid var(--ai-border-2);
  background: var(--ai-surface);
  color: var(--ai-fg-3);
  border-radius: 4px;
  width: 28px;
  height: 26px;
  line-height: 1;
  font-size: 15px;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.ai-menu__btn:hover, .ai-menu__btn[aria-expanded=true] {
  background: var(--ai-btn-hover);
  border-color: var(--ai-border-strong);
  color: var(--ai-fg);
}

.ai-menu {
  position: absolute;
  top: 30px;
  right: 0;
  z-index: 30;
  min-width: 186px;
  background: var(--ai-surface);
  border: 1px solid var(--ai-border-2);
  border-radius: 5px;
  box-shadow: var(--ai-ombra-menu);
  padding: 4px;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.ai-menu[hidden] {
  display: none;
}
.ai-menu.ai-menu--amunt {
  top: auto;
  bottom: 30px;
}

.ai-menu__item {
  border: 0;
  background: none;
  text-align: left;
  padding: 7px 10px;
  font-size: 13.5px;
  color: var(--ai-fg);
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.ai-menu__item:hover {
  background: var(--ai-accent-wash);
  color: var(--ai-fg);
}
.ai-menu__item select {
  max-width: 100%;
  font-size: 12.5px;
}

.ai-menu__item--doc a {
  color: var(--ai-fg);
}
.ai-menu__item--doc a:hover {
  color: var(--ai-fg);
  text-decoration: underline;
}

.ai-menu__item--perill {
  color: var(--ai-perill);
}
.ai-menu__item--perill:hover {
  background: var(--ai-perill-fons);
  color: var(--ai-perill);
}

.ai-menu__sep {
  height: 1px;
  background: var(--ai-border-5);
  margin: 4px 6px;
}

.ai-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
}
.ai-overlay[hidden] {
  display: none;
}

.ai-buit {
  padding: 74px 22px 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.ai-buit .ai-buit__cercle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px dashed #cbc9c2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ai-fg-5);
  font-size: 20px;
}
.ai-buit .ai-buit__tit {
  font-size: 16px;
  font-weight: 600;
  color: var(--ai-fg);
}
.ai-buit .ai-buit__txt {
  font-size: 13.5px;
  color: var(--ai-fg-4);
  max-width: 380px;
  text-wrap: pretty;
}
.ai-buit .ai-btn--primari {
  margin-top: 8px;
  padding: 7px 16px;
}

.ai-sense-anys {
  padding: 56px 22px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.ai-sense-anys[hidden] {
  display: none;
}
.ai-sense-anys .ai-sense-anys__tit {
  font-size: 15px;
  font-weight: 600;
  color: var(--ai-fg);
}
.ai-sense-anys .ai-sense-anys__txt {
  font-size: 13.5px;
  color: var(--ai-fg-4);
}

.ai-peu {
  padding: 12px 22px;
  font-size: 12.5px;
  color: var(--ai-fg-4);
  display: flex;
  gap: 16px;
}
.ai-peu[hidden] {
  display: none;
}

.ai-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(28, 28, 24, 0.44);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 24px;
  overflow: auto;
}
.ai-modal[hidden] {
  display: none;
}

.ai-modal__box {
  width: 100%;
  max-width: 720px;
  background: var(--ai-surface);
  border-radius: 8px;
  box-shadow: var(--ai-ombra-modal);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-modal__cap {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 26px 16px;
  border-bottom: 1px solid var(--ai-border-5);
}
.ai-modal__cap h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ai-modal__cap .ai-modal__sub {
  font-size: 13px;
  color: var(--ai-fg-4);
}
.ai-modal__cap .ai-modal__tanca {
  margin-left: auto;
  border: 1px solid transparent;
  background: none;
  color: var(--ai-fg-3);
  font-size: 18px;
  line-height: 1;
  border-radius: 4px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.ai-modal__cap .ai-modal__tanca:hover {
  background: var(--ai-btn-hover);
  border-color: var(--ai-border);
  color: var(--ai-fg);
}

.ai-modal__cos {
  padding: 20px 26px 6px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ai-camps {
  display: grid;
  gap: 16px;
}
.ai-camps.ai-camps--1 {
  grid-template-columns: 1fr 1fr;
}
.ai-camps.ai-camps--2 {
  grid-template-columns: 1.1fr 0.8fr 0.8fr;
}
.ai-camps.ai-camps--3 {
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 600px) {
  .ai-camps.ai-camps--3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .ai-camps.ai-camps--1 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.ai-camp {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ai-fg-3);
  min-width: 0;
}
.ai-camp > input,
.ai-camp > select,
.ai-camp > textarea,
.ai-camp > .ts-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  min-height: var(--ai-h-camp);
  border: 1px solid var(--ai-border-camp);
  border-radius: 4px;
  padding: 8px 9px;
  font-size: 14px;
  color: var(--ai-fg);
  background-color: var(--ai-surface);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.ai-camp > select,
.ai-camp > .ts-wrapper {
  appearance: none;
  padding-right: 28px;
  background-image: var(--ai-fletxa);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 7px;
}
.ai-camp > .ts-wrapper {
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}
.ai-camp > .ts-wrapper > .ts-control {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 !important;
  background: none;
}
.ai-camp > input {
  font-variant-numeric: tabular-nums;
}
.ai-camp .ai-camp__cap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ai-camp .ai-camp__plantilla {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  min-width: 0;
  max-width: 60%;
  color: var(--ai-fg-4);
}
.ai-camp .ai-camp__plantilla select,
.ai-camp .ai-camp__plantilla .ts-wrapper {
  width: 100% !important;
  min-width: 12em;
  min-height: 26px;
  border: 1px solid var(--ai-border-camp);
  border-radius: 4px;
  padding: 0 24px 0 8px;
  background-color: var(--ai-surface);
  background-image: var(--ai-fletxa);
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 9px 6px;
  appearance: none;
  font-size: 12.5px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ai-fg);
}
.ai-camp .ai-camp__plantilla .ts-wrapper {
  display: flex;
  align-items: center;
}
.ai-camp .ai-camp__plantilla .ts-wrapper > .ts-control {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 !important;
  background: none;
}
.ai-camp.ai-camp--ar > input {
  text-align: right;
}
.ai-camp > .duradaHmAjuda {
  margin: 0;
  min-height: 1.2em;
  text-align: right;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.ai-camp > textarea {
  min-height: 132px;
  line-height: 1.5;
  padding: 10px 11px;
  resize: vertical;
  font-variant-numeric: normal;
}

.ai-camp--vincle .asst-vincle-fila {
  width: 100%;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 14px;
  color: var(--ai-fg);
}
.ai-camp--vincle .asst-vincle {
  flex: 1 1 0;
  width: auto;
  min-height: var(--ai-h-camp);
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 4px;
  border-color: var(--ai-border-camp);
  background: var(--ai-surface);
}
.ai-camp--vincle .asst-codi {
  border-radius: 3px;
  background: var(--ai-accent-tint);
  color: var(--ai-accent-text);
}
.ai-camp--vincle .asst-vincle:focus-within {
  outline: 2px solid var(--ai-accent-border);
  outline-offset: 1px;
}
.ai-camp--vincle .asst-vincle :focus,
.ai-camp--vincle .asst-vincle :focus-visible {
  outline: none;
}

.ai-sensible {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--ai-surface-2);
  border: 1px solid var(--ai-border-5);
  border-radius: 5px;
}
.ai-sensible .ai-sensible__et {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ai-fg-3);
}
.ai-sensible .ai-sensible__caselles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.ai-sensible label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ai-fg-cos);
  cursor: pointer;
}
.ai-sensible input[type=checkbox] {
  width: 15px;
  height: 15px;
  accent-color: var(--ai-sens-check);
}

.ai-modal__peu {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 26px 20px;
  margin-top: 6px;
  border-top: 1px solid var(--ai-border-5);
  background: var(--ai-surface-3);
}
.ai-modal__peu .ai-btn--primari {
  padding: 9px 18px;
  font-size: 14px;
}
.ai-modal__peu .ai-btn--secundari {
  border: 1px solid var(--ai-border-2);
  background: var(--ai-surface);
  color: var(--ai-fg-2);
  border-radius: 4px;
  padding: 9px 16px;
  font-size: 14px;
  cursor: pointer;
}
.ai-modal__peu .ai-btn--secundari:hover {
  background: #f2f2ef;
}
.ai-modal__peu .ai-btn--text {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--ai-fg-3);
  font-size: 14px;
  cursor: pointer;
  padding: 9px 4px;
}
.ai-modal__peu .ai-btn--text:hover {
  color: var(--ai-fg);
}

.tk-app,
.tk-menu,
.tk-chk-fitxa {
  --tk-accent: var(--apl-primary, #1382c4);
  --tk-accent-fosc: color-mix(in oklab, var(--tk-accent) 82%, black);
  --tk-accent-text: color-mix(in oklab, var(--tk-accent) 72%, black);
  --tk-accent-vora: color-mix(in oklab, var(--tk-accent) 55%, white);
  --tk-accent-tint: color-mix(in oklab, var(--tk-accent) 13%, white);
  --tk-accent-fg: #fff;
  --tk-fg: #16232e;
  --tk-fg-2: #3d4a56;
  --tk-fg-3: #5d6b78;
  --tk-fg-4: #8d99a5;
  --tk-fg-5: #98a4b0;
  --tk-fg-6: #c3ccd4;
  --tk-surface: #fff;
  --tk-surface-2: #fbfcfd;
  --tk-surface-3: #f4f7f9;
  --tk-surface-4: #eef2f5;
  --tk-hover: #f7fafc;
  --tk-sel: color-mix(in oklab, var(--tk-accent) 8%, white);
  --tk-border: #e6ebef;
  --tk-border-2: #dce3e8;
  --tk-border-3: #e2e7ec;
  --tk-border-4: #f0f3f6;
  --tk-perill: #c0392b;
  --tk-perill-text: #a8301f;
  --tk-perill-tint: #fbeae7;
  --tk-avis: #c9a227;
  --tk-avis-text: #8a6300;
  --tk-avis-fort: #9a6400;
  --tk-avis-tint: #fdf1dc;
  --tk-avis-tint-2: #fdf7ec;
  --tk-avis-vora: #c9a86a;
  --tk-exit: #16794a;
  --tk-exit-text: #146b43;
  --tk-exit-tint: #e3f4ea;
  --tk-fosc: #16232e;
  --tk-fosc-btn: #27384a;
  --tk-fosc-btn-hover: #334759;
  --tk-fosc-sep: #3a4a58;
  --tk-fosc-fg: #9fb0bf;
  --tk-ombra-card: 0 1px 1px rgba(16, 35, 50, .04);
  --tk-ombra-card-hover: 0 3px 8px rgba(16, 35, 50, .08);
  --tk-ombra-tab: 0 1px 2px rgba(16, 35, 50, .12);
  --tk-ombra-panell: 0 18px 44px rgba(16, 35, 50, .22);
  --tk-ombra-massiva: 0 10px 28px rgba(16, 35, 50, .28);
  --tk-cols: 34px minmax(240px, 1fr) 128px 108px 172px 136px 92px 66px 66px 34px;
  --tk-pad-fila: 11px;
  color: var(--tk-fg);
  min-width: 0;
}
.tk-app::after,
.tk-menu::after,
.tk-chk-fitxa::after {
  display: none;
}
.tk-app .tk-form,
.tk-menu .tk-form,
.tk-chk-fitxa .tk-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.tk-app--plan {
  --tk-cols: 34px minmax(240px, 1fr) 128px 108px 172px 112px 136px 92px 66px 66px 34px;
}
.tk-app--plan .tk-llista {
  min-width: 1246px;
}

html.dark .tk-app,
html.dark .tk-menu,
html.dark .tk-chk-fitxa {
  --tk-accent-fosc: color-mix(in oklab, var(--tk-accent) 78%, white);
  --tk-accent-text: color-mix(in oklab, var(--tk-accent) 66%, white);
  --tk-accent-vora: color-mix(in oklab, var(--tk-accent) 50%, #2a2e32);
  --tk-accent-tint: color-mix(in oklab, var(--tk-accent) 24%, #2a2e32);
  --tk-fg: var(--color-clar-2);
  --tk-fg-2: var(--color-clar-3);
  --tk-fg-3: #a6a49c;
  --tk-fg-4: #97958d;
  --tk-fg-5: #8b8981;
  --tk-fg-6: #74726b;
  --tk-surface: var(--color-fosc-2);
  --tk-surface-2: #23272a;
  --tk-surface-3: #23272a;
  --tk-surface-4: var(--color-fosc-3);
  --tk-hover: #31363a;
  --tk-sel: color-mix(in oklab, var(--tk-accent) 22%, #2a2e32);
  --tk-border: var(--color-fosc-4);
  --tk-border-2: var(--color-fosc-4);
  --tk-border-3: var(--color-fosc-3);
  --tk-border-4: var(--color-fosc-3);
  --tk-perill-text: #e08d7d;
  --tk-perill-tint: #452824;
  --tk-avis-text: #e8cf9d;
  --tk-avis-fort: #e8cf9d;
  --tk-avis-tint: #4a3a1c;
  --tk-avis-tint-2: #3d3320;
  --tk-avis-vora: #6d5527;
  --tk-exit-text: #8fd6ac;
  --tk-exit-tint: #24402f;
  --tk-fosc: #10181f;
  --tk-ombra-card: 0 1px 2px rgba(0, 0, 0, .3);
  --tk-ombra-card-hover: 0 3px 8px rgba(0, 0, 0, .45);
  --tk-ombra-tab: 0 1px 2px rgba(0, 0, 0, .4);
  --tk-ombra-panell: 0 18px 44px rgba(0, 0, 0, .55);
  --tk-ombra-massiva: 0 10px 28px rgba(0, 0, 0, .6);
}

.tk-app .tk-cap {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}

.tk-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 12px;
  flex-wrap: wrap;
  font-size: 12.5px;
}

.tk-vistes {
  display: flex;
  background: var(--tk-surface-4);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}

.tk-vista {
  border: 0;
  background: transparent;
  color: var(--tk-fg-3);
  border-radius: 6px;
  padding: 6px 15px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.tk-vista.tk-vista--on {
  background: var(--tk-surface);
  color: var(--tk-accent-text);
  box-shadow: var(--tk-ombra-tab);
}

.tk-app .tk-barra--extern > :not(.tk-vistes) {
  display: none;
}

.tk-vista-extra {
  padding: 4px 0 8px;
  min-width: 0;
}

.tk-app .tk-cerca {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--tk-border-2);
  border-radius: 8px;
  padding: 3px 10px;
  width: 250px;
  background: var(--tk-surface);
  color: var(--tk-fg-5);
}
.tk-app .tk-cerca input {
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 12.5px;
  width: 100%;
  padding: 3px 0;
  color: var(--tk-fg);
}

.tk-separador {
  width: 1px;
  height: 22px;
  background: var(--tk-border-3);
}

.tk-xip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--tk-border-2);
  background: var(--tk-surface);
  color: var(--tk-fg-3);
  border-radius: 8px;
  padding: 6px 11px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.tk-xip.tk-xip--on {
  border-color: var(--tk-accent);
  background: var(--tk-accent-tint);
  color: var(--tk-accent-text);
  font-weight: 600;
}

.tk-xip--panell {
  margin-left: auto;
}

.tk-icona-filtres {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 13px;
}
.tk-icona-filtres span {
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
}
.tk-icona-filtres span:nth-child(2) {
  width: 9px;
}
.tk-icona-filtres span:nth-child(3) {
  width: 5px;
}

.tk-comptador {
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--tk-accent);
  color: var(--tk-accent-fg);
  font-size: 10.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.tk-app .tk-tria[hidden] {
  display: none;
}

.tk-app .tk-tria {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--tk-border-2);
  border-radius: 8px;
  padding: 2px 8px 2px 10px;
  font-size: 12.5px;
  color: var(--tk-fg-3);
  background: var(--tk-surface);
}
.tk-app .tk-tria.tk-tria--on {
  border-color: var(--tk-accent);
  background: var(--tk-accent-tint);
  color: var(--tk-accent-text);
}
.tk-app .tk-tria select {
  border: 0;
  background: transparent;
  font-size: 12.5px;
  color: inherit;
  padding: 4px 0;
  max-width: 12em;
}

.tk-app .tk-btn {
  border: 1px solid var(--tk-border-2);
  background: var(--tk-surface);
  color: var(--tk-fg-2);
  border-radius: 8px;
  padding: 7px 13px;
  font-size: 12.5px;
  cursor: pointer;
}
.tk-app .tk-btn--primari {
  border-color: transparent;
  background: var(--tk-accent);
  color: var(--tk-accent-fg);
  font-weight: 600;
}
.tk-app .tk-btn--primari:hover {
  background: var(--tk-accent-fosc);
  color: var(--tk-accent-fg);
}

.tk-panell-fons {
  position: fixed;
  inset: 0;
  z-index: 30;
}
.tk-panell-fons[hidden] {
  display: none;
}

.tk-panell {
  position: fixed;
  top: 6rem;
  right: 2rem;
  width: 392px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 8rem);
  display: flex;
  flex-direction: column;
  background: var(--tk-surface);
  border: 1px solid var(--tk-border-3);
  border-radius: 12px;
  box-shadow: var(--tk-ombra-panell);
  overflow: hidden;
  font-size: 12.5px;
}
.tk-panell__cap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--tk-border-4);
  font-size: 13.5px;
  font-weight: 650;
}
.tk-panell__x {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--tk-fg-5);
  font-size: 15px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 4px;
}
.tk-panell__x:hover {
  color: var(--tk-fg-2);
}
.tk-panell__cos {
  flex: 1;
  overflow-y: auto;
  padding: 14px 15px 4px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tk-panell__peu {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  border-top: 1px solid var(--tk-border-4);
  background: var(--tk-surface-2);
}
.tk-panell__n {
  font-size: 11.5px;
  color: var(--tk-fg-4);
  font-variant-numeric: tabular-nums;
}
.tk-panell #tkPanellNeteja {
  margin-left: auto;
}

.tk-grup {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.tk-grup__et {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--tk-fg-4);
  text-transform: uppercase;
}
.tk-grup .ts-wrapper {
  width: 100% !important;
}

.tk-carregues {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tk-carrega {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--tk-fg-2);
}
.tk-carrega__h {
  margin-left: auto;
  font-size: 11px;
  color: var(--tk-fg-4);
  font-variant-numeric: tabular-nums;
}

.tk-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.tk-dates label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  color: var(--tk-fg-3);
}
.tk-dates input {
  width: 100%;
  max-width: 100%;
}

.tk-app .tk-interruptor {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid var(--tk-border);
  background: var(--tk-surface);
  cursor: pointer;
}
.tk-app .tk-interruptor__txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tk-app .tk-interruptor__t {
  font-size: 12.5px;
  color: var(--tk-fg);
}
.tk-app .tk-interruptor__s {
  font-size: 11px;
  color: var(--tk-fg-4);
}
.tk-app .tk-interruptor input {
  margin-left: auto;
}

.tk-contingut {
  padding: 4px 0 8px;
  min-height: 12em;
  max-height: 72vh;
  min-width: 0;
  overflow: auto;
}

.tk-llista {
  min-width: 1134px;
}

.tk-taula-cap,
.tk-fila {
  display: grid;
  grid-template-columns: var(--tk-cols);
  align-items: center;
}

.tk-taula-cap {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--tk-surface-2);
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--tk-border);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--tk-fg-4);
  text-transform: uppercase;
}
.tk-taula-cap .tk-ar {
  text-align: right;
  padding-right: 8px;
}
.tk-taula-cap .tk-ordena {
  cursor: pointer;
  user-select: none;
}
.tk-taula-cap .tk-ordena:hover, .tk-taula-cap .tk-ordena--on {
  color: var(--tk-fg-2);
}
.tk-taula-cap .tk-ordena__fletxa {
  margin-left: 4px;
  font-size: 8px;
}

.tk-grupcap {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px 7px;
  margin-top: 18px;
}
.tk-grupcap__punt {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.tk-grupcap__et {
  font-size: 12.5px;
  font-weight: 650;
}
.tk-grupcap__n {
  font-size: 11.5px;
  color: var(--tk-fg-5);
  font-variant-numeric: tabular-nums;
}
.tk-grupcap__filet {
  flex: 1;
  height: 1px;
  background: var(--tk-border-4);
}
.tk-grupcap--pers {
  padding-bottom: 9px;
}
.tk-grupcap--pers .tk-grupcap__et {
  font-size: 13.5px;
}
.tk-grupcap__barra {
  flex: 1;
  max-width: 260px;
  height: 6px;
  margin: 0 4px;
  border-radius: 999px;
  background: var(--tk-surface-2);
  overflow: hidden;
}
.tk-grupcap__barra-fet {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--tk-accent);
}
.tk-grupcap__h {
  margin-left: auto;
  color: var(--tk-fg-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  cursor: help;
}

.tk-grupcos {
  border: 1px solid var(--tk-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--tk-surface);
}

.tk-fila {
  padding: var(--tk-pad-fila) 10px;
  border-top: 1px solid var(--tk-border-4);
  background: var(--tk-surface);
}
.tk-fila:first-child {
  border-top: 0;
}
.tk-fila:hover {
  background: var(--tk-hover);
}
.tk-fila.tk-fila--sel {
  background: var(--tk-sel);
}
.tk-fila input[type=checkbox] {
  width: 14px;
  height: 14px;
  accent-color: var(--tk-accent);
  cursor: pointer;
}
.tk-fila__tasca {
  padding-right: 18px;
  min-width: 0;
}
.tk-fila__titol {
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--tk-fg);
  text-wrap: pretty;
  cursor: pointer;
}
.tk-fila__titol:hover {
  color: var(--tk-accent-text);
  text-decoration: underline;
}
.tk-fila__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  font-size: 11px;
  color: var(--tk-fg-4);
}
.tk-fila__sep {
  color: var(--tk-fg-6);
}
.tk-fila__data {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--tk-fg-2);
}
.tk-fila__dataestat {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--tk-fg-3);
}
.tk-fila__pri {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--tk-fg-3);
}
.tk-fila__he, .tk-fila__hr {
  text-align: right;
  padding-right: 8px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--tk-fg-2);
}

.tk-punt {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}

.tk-estat {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: color-mix(in oklab, var(--tk-estat-color) 16%, white);
  color: color-mix(in oklab, var(--tk-estat-color) 68%, black);
}

html.dark .tk-estat {
  background: color-mix(in oklab, var(--tk-estat-color) 26%, #2a2e32);
  color: color-mix(in oklab, var(--tk-estat-color) 56%, white);
}

.tk-avatar {
  width: 23px;
  height: 23px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}

/* Qui l'ha passat a la persona assignada, en un estat de revisió («Clàudia →»). */
.tk-app .tk-traspas {
  white-space: nowrap;
  font-size: 11.5px;
  color: var(--tk-fg-3);
}

.tk-app .tk-assignat {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 999px;
  padding: 3px 9px 3px 3px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--tk-fg-2);
  max-width: 100%;
}
.tk-app .tk-assignat span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-app .tk-assignat:hover {
  border-color: var(--tk-border-2);
  background: var(--tk-hover);
  color: var(--tk-fg-2);
}

.tk-app .tk-assigna {
  border: 1px dashed var(--tk-avis-vora);
  background: var(--tk-avis-tint-2);
  color: var(--tk-avis-text);
  border-radius: 999px;
  padding: 4px 11px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.tk-app .tk-assigna:hover {
  background: var(--tk-avis-tint);
  color: var(--tk-avis-text);
}
.tk-app .tk-assigna--mini {
  padding: 2px 9px;
  font-size: 10.5px;
}

.tk-app .tk-dataedit {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 7px;
  padding: 3px 7px;
  margin-left: -7px;
  max-width: 100%;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--tk-fg-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tk-app .tk-dataedit:hover {
  border-color: var(--tk-border-2);
  background: var(--tk-hover);
  color: var(--tk-fg-2);
}
.tk-app .tk-dataedit--buida {
  font-size: 11.5px;
  font-style: italic;
  color: var(--tk-fg-5);
}

.tk-nota {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 7px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 600;
}
.tk-nota--late {
  background: var(--tk-perill-tint);
  color: var(--tk-perill-text);
}
.tk-nota--soon {
  background: var(--tk-avis-tint);
  color: var(--tk-avis-text);
}

.tk-app .tk-menu-btn {
  border: 0;
  background: transparent;
  color: var(--tk-fg-6);
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  padding: 2px;
  text-align: center;
}
.tk-app .tk-menu-btn:hover {
  color: var(--tk-fg-3);
}

.tk-buit {
  margin-top: 40px;
  text-align: center;
  color: var(--tk-fg-4);
  font-size: 13px;
}

.tk-nova {
  margin: 10px 0 2px;
}
.tk-nova__boto[hidden], .tk-nova__form[hidden] {
  display: none;
}
.tk-nova__boto {
  display: block;
  width: 100%;
  margin: 0;
  padding: 11px 14px;
  border: 1px dashed var(--tk-border-2);
  border-radius: 10px;
  background: transparent;
  color: var(--tk-fg-4);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.tk-nova__boto:hover, .tk-nova__boto:focus-visible {
  border-color: var(--tk-accent);
  color: var(--tk-accent-text);
}
.tk-nova__form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 14px;
  border: 1px dashed var(--tk-accent);
  border-radius: 10px;
  background: var(--tk-surface);
}
.tk-nova__camp {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  font-size: 13px;
  color: var(--tk-fg);
}
.tk-nova .tk-btn {
  margin: 0;
  white-space: nowrap;
}

.tk-app .tk-nova__boto:focus:not(.maximized),
.tk-app .tk-nova__camp:focus:not(.maximized) {
  background-color: transparent;
  box-shadow: none;
}

.tk-app .tk-nova .tk-btn:focus:not(.maximized) {
  background-color: var(--tk-surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tk-accent) 25%, transparent);
}

.tk-app .tk-nova .tk-btn--primari:focus:not(.maximized) {
  background-color: var(--tk-accent);
}

.tk-tauler {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  min-width: min-content;
  padding: 4px 0 8px;
}

.tk-col {
  flex: 1;
  min-width: 236px;
  background: var(--tk-surface-3);
  border: 1px solid var(--tk-border);
  border-radius: 11px;
  padding: 10px;
}
.tk-col.tk-col--sobre {
  border-color: var(--tk-accent);
  background: var(--tk-accent-tint);
}
.tk-col__cap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px 10px;
}
.tk-col__punt {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: none;
}
.tk-col__nom {
  font-size: 12.5px;
  font-weight: 650;
}
.tk-col__n {
  font-size: 11.5px;
  color: var(--tk-fg-4);
  font-variant-numeric: tabular-nums;
}
.tk-col__h {
  margin-left: auto;
  font-size: 11px;
  color: var(--tk-fg-4);
  font-variant-numeric: tabular-nums;
}
.tk-col__cos {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tk-card {
  background: var(--tk-surface);
  border: 1px solid var(--tk-border-3);
  border-radius: 9px;
  padding: 10px 11px;
  box-shadow: var(--tk-ombra-card);
}
.tk-card[draggable=true] {
  cursor: grab;
}
.tk-card:hover {
  border-color: var(--tk-fg-6);
  box-shadow: var(--tk-ombra-card-hover);
}
.tk-card.tk-card--sel {
  background: var(--tk-sel);
}
.tk-card__cap {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}
.tk-card__id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: var(--tk-fg-5);
}
.tk-card__titol {
  font-size: 12.5px;
  line-height: 1.4;
  text-wrap: pretty;
  cursor: pointer;
}
.tk-card__titol:hover {
  color: var(--tk-accent-text);
  text-decoration: underline;
}
.tk-card__peu {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--tk-fg-4);
  font-variant-numeric: tabular-nums;
}
.tk-card__he {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--tk-fg-3);
}
.tk-card .tk-avatar {
  width: 21px;
  height: 21px;
  font-size: 9.5px;
}
.tk-card .tk-nota {
  margin-top: 0;
  font-size: 10px;
}

.tk-app .tk-afegeix {
  border: 1px dashed var(--tk-border-2);
  background: transparent;
  color: var(--tk-fg-4);
  border-radius: 8px;
  padding: 7px;
  font-size: 12px;
  cursor: pointer;
}
.tk-app .tk-afegeix:hover {
  border-color: var(--tk-accent);
  color: var(--tk-accent-text);
}

.tk-cal__cap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.tk-cal__mes {
  font-size: 15px;
  font-weight: 650;
  min-width: 9em;
}

.tk-app .tk-cal__nav {
  border: 1px solid var(--tk-border-2);
  background: var(--tk-surface);
  border-radius: 7px;
  width: 28px;
  height: 26px;
  cursor: pointer;
  color: var(--tk-fg-3);
  padding: 0;
}

.tk-cal__nota {
  font-size: 12px;
  color: var(--tk-fg-4);
}

.tk-cal__graella {
  border: 1px solid var(--tk-border);
  border-radius: 11px;
  overflow: hidden;
  background: var(--tk-surface);
}

.tk-cal__dies,
.tk-cal__fons,
.tk-cal__barres {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.tk-cal__dies {
  background: var(--tk-hover);
  border-bottom: 1px solid var(--tk-border);
}
.tk-cal__dies span {
  padding: 8px 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--tk-fg-4);
  text-transform: uppercase;
}

.tk-cal__setmana {
  position: relative;
  border-top: 1px solid var(--tk-border-4);
}

.tk-cal__barres {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  grid-auto-rows: 20px;
  row-gap: 4px;
  pointer-events: none;
}

.tk-cal__dia {
  min-height: max(112px, 38px + var(--tk-cal-files, 3) * 24px);
  padding: 7px 8px;
  border-left: 1px solid var(--tk-border-4);
  background: var(--tk-surface);
}
.tk-cal__dia:first-child {
  border-left: 0;
}
.tk-cal__dia--fora {
  background: var(--tk-surface-2);
}
.tk-cal__dia--avui {
  background: var(--tk-accent-tint);
}
.tk-cal__dia__cap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.tk-cal__dia__n {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--tk-fg-2);
  font-variant-numeric: tabular-nums;
}
.tk-cal__dia--fora .tk-cal__dia__n {
  color: var(--tk-fg-6);
}
.tk-cal__dia--avui .tk-cal__dia__n {
  color: var(--tk-accent-text);
  font-weight: 700;
}
.tk-cal__dia__avui {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--tk-accent-text);
  text-transform: uppercase;
}

.tk-tram {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 3px;
  padding: 0 7px;
  height: 20px;
  border-radius: 5px;
  font-size: 11px;
  line-height: 1;
  border-left: 3px solid;
  overflow: hidden;
  cursor: pointer;
  min-width: 0;
}
.tk-tram__t {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tk-tram__fita {
  flex: none;
}
.tk-tram--ve {
  margin-left: 0;
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.tk-tram--segueix {
  margin-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.tk-tram--late {
  background: var(--tk-perill-tint);
  color: var(--tk-perill-text);
  border-left-color: var(--tk-perill);
}
.tk-tram--soon {
  background: var(--tk-avis-tint);
  color: var(--tk-avis-text);
  border-left-color: var(--tk-avis);
}
.tk-tram--plan {
  background: var(--tk-accent-tint);
  color: var(--tk-accent-text);
  border-left-color: var(--tk-accent);
}
.tk-tram--done {
  background: var(--tk-exit-tint);
  color: var(--tk-exit-text);
  border-left-color: var(--tk-exit);
}

.tk-cal__mes-mes {
  pointer-events: auto;
  grid-column: 1/-1;
  align-self: center;
  font-size: 10.5px;
  color: var(--tk-fg-4);
  padding-left: 11px;
  cursor: pointer;
}

.tk-cal__llegenda {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--tk-fg-3);
  flex-wrap: wrap;
}
.tk-cal__llegenda span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tk-cal__llegenda i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}

.tk-massiva {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 3.6rem;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--tk-fosc);
  color: #fff;
  border-radius: 11px;
  padding: 9px 12px;
  box-shadow: var(--tk-ombra-massiva);
  z-index: 30;
  animation: tk-puja 0.16s ease-out;
}
.tk-massiva[hidden] {
  display: none;
}
.tk-massiva__n {
  font-size: 12.5px;
  font-weight: 600;
  padding-left: 4px;
  white-space: nowrap;
}
.tk-massiva__sep {
  width: 1px;
  height: 20px;
  background: var(--tk-fosc-sep);
}
.tk-massiva__btn {
  background: var(--tk-fosc-btn);
  border: 0;
  color: #fff;
  border-radius: 7px;
  padding: 6px 11px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.tk-massiva__btn:hover {
  background: var(--tk-fosc-btn-hover);
  color: #fff;
}
.tk-massiva__x {
  background: transparent;
  border: 0;
  color: var(--tk-fosc-fg);
  border-radius: 7px;
  padding: 6px 8px;
  font-size: 12px;
  cursor: pointer;
}
.tk-massiva__x:hover {
  color: #fff;
}

@keyframes tk-puja {
  from {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
.tk-modal-fons {
  position: fixed;
  inset: 0;
  background: rgba(16, 35, 50, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
}
.tk-modal-fons[hidden] {
  display: none;
}

.tk-modal {
  width: 308px;
  max-width: calc(100vw - 24px);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--tk-surface);
  border-radius: 12px;
  box-shadow: var(--tk-ombra-panell);
  overflow: hidden;
}
.tk-modal__cap {
  padding: 12px 14px;
  border-bottom: 1px solid var(--tk-border-4);
  font-size: 13px;
  font-weight: 650;
}
.tk-modal__sub {
  font-size: 11.5px;
  color: var(--tk-fg-4);
  margin-top: 2px;
  font-weight: 400;
}
.tk-modal__cos {
  padding: 6px;
  overflow-y: auto;
}

.tk-app .tk-persona {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  color: var(--tk-fg);
}
.tk-app .tk-persona:hover {
  background: var(--tk-hover);
  color: var(--tk-fg);
}
.tk-app .tk-persona__h {
  margin-left: auto;
  font-size: 11px;
  color: var(--tk-fg-4);
  font-variant-numeric: tabular-nums;
}
.tk-app .tk-persona .tk-avatar {
  width: 26px;
  height: 26px;
  font-size: 10.5px;
}

.tk-menu {
  position: fixed;
  z-index: 45;
  background: var(--tk-surface);
  border: 1px solid var(--tk-border-3);
  border-radius: 9px;
  box-shadow: var(--tk-ombra-panell);
  padding: 4px;
  min-width: 190px;
  display: flex;
  flex-direction: column;
}
.tk-menu button {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--tk-fg-2);
  cursor: pointer;
}
.tk-menu button:hover {
  background: var(--tk-hover);
  color: var(--tk-fg);
}
.tk-menu button.tk-menu--perill:hover {
  color: var(--tk-perill-text);
}

.tk-app .tk-peu {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 12.5px;
  color: var(--tk-fg-3);
  margin-top: 12px;
}

@media (max-width: 900px) {
  .tk-xip--panell {
    margin-left: 0;
  }
  .tk-panell {
    top: 8px;
    left: 8px;
    right: 8px;
    width: auto;
    max-height: calc(100% - 16px);
  }
}
.tk-etiq {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.tk-etiq__x {
  padding: 1px 6px;
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  max-width: 12em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tk-chk-xip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 1px 8px;
  border: 1px solid var(--tk-border-2);
  border-radius: 999px;
  background: var(--tk-surface);
  color: var(--tk-fg-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.tk-chk-xip:hover {
  border-color: var(--tk-accent);
  color: var(--tk-accent-text);
}
.tk-chk-xip.tk-chk-xip--ok {
  border-color: var(--tk-exit);
  color: var(--tk-exit-text);
}

.tk-chk__llista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 46vh;
  overflow-y: auto;
}

.tk-chk__item {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.tk-chk__item:hover {
  background: var(--tk-surface-2);
}
.tk-chk__item.tk-chk__item--fet .tk-chk__text {
  color: var(--tk-fg-3);
  text-decoration: line-through;
}

.tk-chk__text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.tk-chk__x {
  flex: none;
  border: none;
  background: none;
  color: var(--tk-fg-3);
  cursor: pointer;
}
.tk-chk__x:hover {
  color: var(--tk-perill);
}
.tk-chk__x:disabled {
  cursor: default;
  opacity: 0.5;
}

.tk-chk__buit {
  padding: 10px 8px;
  color: var(--tk-fg-3);
  font-size: 13px;
}

.tk-chk__alta {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.tk-chk__alta input {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--tk-border-2);
  border-radius: 8px;
  background: var(--tk-surface);
  color: var(--tk-fg);
  font-size: 13px;
}

.tk-chk__afegeix {
  padding: 6px 12px;
  border: 1px solid var(--tk-accent);
  border-radius: 8px;
  background: var(--tk-accent-tint);
  color: var(--tk-accent-text);
  font-size: 13px;
  cursor: pointer;
}

.tk-chk__progres {
  height: 4px;
  margin: 2px 8px 8px;
  border-radius: 999px;
  background: var(--tk-surface-4);
  overflow: hidden;
}
.tk-chk__progres span {
  display: block;
  height: 100%;
  background: var(--tk-exit);
  transition: width 0.2s ease;
}

.tk-chk__alta[hidden],
.tk-chk__progres[hidden] {
  display: none;
}

.tk-chk__item--lectura {
  cursor: default;
}

.tk-chk-fitxa {
  grid-column: 1/-1;
}
.tk-chk-fitxa .tk-chk {
  max-width: 760px;
}
.tk-chk-fitxa .tk-chk__llista {
  max-height: none;
}
.tk-chk-fitxa .tk-chk__item {
  padding: 8px 10px;
  font-size: 14px;
}

.tk-chk-fitxa__recompte {
  margin-left: 8px;
  font-weight: 400;
  color: var(--tk-fg-3);
  font-variant-numeric: tabular-nums;
}

.tasca-adjunta {
  cursor: pointer;
  border-radius: 4px;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.tasca-adjunta.is-arrossegant {
  margin-inline: 0.2em;
  padding: 0.3em 0.45em;
  outline: 2px dashed currentColor;
  outline-offset: 1px;
}
.tasca-adjunta.is-sobre {
  background-color: var(--color-text);
  color: var(--color-editable);
  transform: scale(1.15);
}

.tasca-adjunta-pendents {
  flex: none;
  gap: 0.2em 0.8em;
}
.tasca-adjunta-pendents .tasca-adjunta-pendent {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  max-width: 14em;
  font-style: italic;
}
.tasca-adjunta-pendents .tasca-adjunta-pendent > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tasca-adjunta-pendents .tasca-adjunta-pendent > button {
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  padding: 0 0.2em;
}

.tk-card__rep {
  color: var(--tk-fg-3);
  font-size: 12px;
  cursor: default;
}

.tk-temps__caixa {
  display: flex;
  align-items: flex-start;
}

.tk-temps__noms {
  flex: none;
  width: 220px;
  padding-top: 26px;
  border-right: 1px solid var(--tk-border-2);
}

.tk-temps__nom {
  display: flex;
  align-items: center;
  padding-right: 10px;
  font-size: 12.5px;
}

.tk-temps__titol {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.tk-temps__titol:hover {
  color: var(--tk-accent-text);
}

.tk-temps__scroll {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}

.tk-temps__mesos {
  position: relative;
  height: 26px;
}

.tk-temps__mes {
  position: absolute;
  top: 0;
  overflow: hidden;
  padding-left: 6px;
  border-left: 1px solid var(--tk-border-2);
  color: var(--tk-fg-3);
  font-size: 11px;
  line-height: 26px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tk-temps__llenc {
  position: relative;
  background-image: repeating-linear-gradient(to right, var(--tk-border) 0 1px, transparent 1px 22px);
}

.tk-temps__avui {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--tk-perill);
  opacity: 0.5;
}

.tk-temps__barra {
  position: absolute;
  height: 20px;
  border-radius: 5px;
  background: var(--tk-accent);
  cursor: pointer;
}
.tk-temps__barra.tk-temps__barra--feta {
  background: var(--tk-exit);
  opacity: 0.55;
}
.tk-temps__barra.tk-temps__barra--critica {
  outline: 2px solid var(--tk-perill);
  outline-offset: 1px;
}

.tk-temps__fletxes {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.tk-fletxa {
  fill: none;
  stroke: var(--tk-fg-3);
  stroke-width: 1.5;
}
.tk-fletxa.tk-fletxa--critica {
  stroke: var(--tk-perill);
}

.tk-temps__peu {
  padding: 10px 0 0;
  color: var(--tk-fg-3);
  font-size: 12px;
}

.tk-dep__llista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 40vh;
  overflow-y: auto;
}

.tk-dep__tria {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--tk-border-2);
  border-radius: 8px;
  background: var(--tk-surface);
  color: var(--tk-fg);
  font-size: 13px;
}

.tk-det {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 62vh;
  overflow-y: auto;
}

.tk-det__cap {
  margin-top: 6px;
  color: var(--tk-fg-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tk-det__html {
  font-size: 13px;
  line-height: 1.45;
}
.tk-det__html img {
  max-width: 100%;
  height: auto;
}
.tk-det__html table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
.tk-det__html p:last-child {
  margin-bottom: 0;
}

.tk-det__obre {
  align-self: flex-start;
  margin-top: 6px;
  padding: 0;
  border: none;
  background: none;
  color: var(--tk-accent-text);
  font-size: 12px;
  cursor: pointer;
}

.tk-det__docs {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tk-det__doc {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  text-decoration: none;
}
.tk-det__doc:hover {
  background: var(--tk-surface-2);
}

.tk-det__ext {
  flex: none;
  min-width: 3.4em;
  color: var(--tk-fg-3);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.tk-det__nom {
  flex: 1;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tk-det__puja {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  align-self: flex-start;
  padding: 6px 12px;
  border: 1px dashed var(--tk-border-3);
  border-radius: 8px;
  color: var(--tk-fg-3);
  font-size: 12.5px;
  cursor: pointer;
}
.tk-det__puja:hover {
  border-color: var(--tk-accent);
  color: var(--tk-accent-text);
}

.tk-det__fil {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tk-det__apunt {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--tk-surface-2);
}

.tk-det__apunt-cap {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 3px;
}

.tk-det__autor {
  font-size: 12.5px;
  font-weight: 600;
}

.tk-det__text {
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tk-col__nom--edit {
  cursor: pointer;
}
.tk-col__nom--edit:hover {
  text-decoration: underline dotted;
}

.tk-col__x {
  border: none;
  background: none;
  color: var(--tk-fg-3);
  cursor: pointer;
}
.tk-col__x:hover {
  color: var(--tk-perill);
}

.tk-col--nova {
  align-self: flex-start;
  min-width: 160px;
  border: 1px dashed var(--tk-border-3);
  background: transparent;
}

.tk-col-convit {
  align-self: flex-start;
  margin-left: 4px;
  padding: 8px 14px;
  border: 1px dashed var(--tk-border-3);
  border-radius: 10px;
  background: transparent;
  color: var(--tk-fg-3);
  font-size: 12.5px;
  cursor: pointer;
}
.tk-col-convit:hover {
  border-color: var(--tk-accent);
  color: var(--tk-accent-text);
}

#dades.ofs-seguiment {
  display: flex;
  flex-direction: column;
  align-content: start;
  gap: 13px;
  padding: 12px;
  background: var(--bg);
}

.ofs-seguiment .ofs-card {
  margin: 0;
  flex: none;
}
.ofs-seguiment .ofs-card--llistes {
  flex: 1 0 auto;
}

:root {
  --ofs-cap-h: 41px;
}

.ofs-card__h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-height: var(--ofs-cap-h);
  padding: 0 18px;
}

.ofs-card__sub {
  font-size: 0.9rem;
  color: var(--fg-faint);
}

.ofs-toggle {
  min-height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.ofs-toggle:hover {
  background: var(--surface-2);
}
.ofs-toggle.is-on {
  color: var(--fg-muted);
}

.ofs-seguiment .asst-btn {
  font-size: 1rem;
  height: auto;
  min-height: var(--h-btn);
}
.ofs-seguiment .asst-label {
  font-size: 0.95rem;
}
.ofs-seguiment .asst-input,
.ofs-seguiment .asst-textarea {
  font-size: 1.05rem;
}
.ofs-seguiment .asst-input {
  height: auto;
  min-height: var(--h-input);
}
.ofs-seguiment .asst-pill {
  font-size: 0.9rem;
}

.ofs-estat {
  padding: 9px 18px;
}

.ofs-estat__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
}

.ofs-estat__camp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 9px;
  min-width: 0;
  font-size: 1.05rem;
}
.ofs-estat__camp .ts-wrapper,
.ofs-estat__camp select {
  min-width: 15em;
}
.ofs-estat__camp .ts-wrapper {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: var(--h-input);
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--surface);
}
.ofs-estat__camp .ts-wrapper.focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.ofs-estat__camp input.asst-input {
  width: 8.5em;
}

.ofs-estat__label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg-muted);
  white-space: nowrap;
}

.ofs-estat__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.ofs-estat__btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.ofs-estat__notes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 9px;
}
.ofs-estat__notes textarea {
  width: 100% !important;
  max-width: 100%;
}

.ofs-pill-estat {
  background: color-mix(in srgb, var(--ofs-estat, var(--accent)) 14%, var(--surface));
  color: color-mix(in srgb, var(--ofs-estat, var(--accent)) 72%, var(--fg));
}

.ofs-fites {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--border-soft);
}

.ofs-fita {
  padding: 10px 18px;
  box-shadow: inset -1px 0 0 0 var(--border-soft);
}

.ofs-fita__titol {
  font-size: 0.95rem;
  color: var(--fg-muted);
}

.ofs-fita__valor {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin-top: 2px;
}

.ofs-fita__data {
  font-size: 1.2rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.ofs-fita__data--buit {
  color: var(--fg-faint);
}

.ofs-fita__pista {
  font-size: 0.9rem;
  color: var(--fg-faint);
  white-space: nowrap;
}
.ofs-fita__pista--alerta {
  color: var(--pending-fg);
  font-weight: 600;
}

.ofs-edicio {
  padding: 14px 18px 16px;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-2);
}

.ofs-camps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
}

.ofs-camp {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ofs-camp--full {
  grid-column: 1/-1;
}
.ofs-camp input, .ofs-camp select, .ofs-camp textarea, .ofs-camp .ts-wrapper, .ofs-camp span.select2-container {
  width: 100% !important;
  max-width: 100%;
}

.ofs-edicio__peu {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}

.ofs-contacte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-top: 1px solid var(--border-soft);
}

.ofs-contacte__cel {
  padding: 10px 18px;
  box-shadow: inset -1px 0 0 0 var(--border-soft);
}

.ofs-contacte__titol {
  font-size: 0.95rem;
  color: var(--fg-muted);
}

.ofs-contacte__valor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 1.05rem;
}

.ofs-tel {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ofs-buit {
  color: var(--fg-faint);
}

.ofs-avis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 10px 18px;
  background: var(--pending-soft);
  color: var(--pending-fg);
}

.ofs-avis__punt {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--pending);
}

.ofs-avis__text {
  flex: 1;
  min-width: 220px;
  font-size: 1.05rem;
}

.ofs-avis__btn {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--pending) 45%, var(--surface));
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--pending-fg);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.ofs-avis__btn:hover {
  background: var(--surface-2);
}

.ofs-terminis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
  gap: 0 26px;
  padding: 4px 18px 12px;
}

.ofs-termini {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-soft);
}

.ofs-termini__label {
  flex: 1 1 160px;
  min-width: 140px;
  font-size: 1.05rem;
}

.ofs-termini__sigla {
  flex: none;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--fg-faint);
}

.ofs-termini__valor {
  flex: none;
  min-width: 70px;
  text-align: right;
  white-space: nowrap;
  font-size: 1.05rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.ofs-termini__habils {
  flex: none;
  min-width: 90px;
  text-align: right;
  font-size: 0.9rem;
  color: var(--fg-faint);
  white-space: nowrap;
}

.ofs-tabs {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  min-height: var(--ofs-cap-h);
  padding: 0 18px;
  border-bottom: 1px solid var(--border-soft);
}

.ofs-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px 9px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--fg-muted);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
}
.ofs-tab.is-on {
  color: var(--fg);
  font-weight: 700;
  border-bottom-color: var(--accent);
}

.ofs-tab__n {
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

.ofs-tab__avis {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--pending);
}

.ofs-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border-soft);
}

.ofs-cerca {
  position: relative;
  flex: 0 1 190px;
  min-width: 140px;
}
.ofs-cerca i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-faint);
  pointer-events: none;
}

.ofs-cerca__input {
  width: 100%;
  height: 2.3em;
  padding: 0 10px 0 30px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 1.05rem;
}
.ofs-cerca__input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

.ofs-barra__accions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-left: auto;
}

.ofs-btn-canal {
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.ofs-btn-canal:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.ofs-timeline {
  --ofs-rp: 10px;
  --ofs-hora-w: 4.2rem;
  padding: 4px 18px 16px;
}

.ofs-dia {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0 4px;
}
.ofs-dia::before {
  content: "";
  width: calc(var(--ofs-hora-w) + 26px);
  flex: none;
}

.ofs-dia__data {
  font-size: 1rem;
  font-weight: 700;
  color: var(--fg-muted);
}

.ofs-dia__rel {
  font-size: 0.9rem;
  color: var(--fg-faint);
}

.ofs-dia__linia {
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}

.ofs-apunt {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.ofs-apunt__hora {
  width: var(--ofs-hora-w);
  flex: none;
  text-align: right;
  padding-top: calc(var(--ofs-rp) + 4px);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
}

.ofs-apunt__espina {
  width: 14px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(var(--border), var(--border)) center/1px 100% no-repeat;
}

.ofs-punt {
  width: 11px;
  height: 11px;
  margin-top: calc(var(--ofs-rp) + 8px);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--surface);
}
.ofs-punt--auto {
  background: var(--border-strong);
}

.ofs-apunt__cos {
  flex: 1;
  min-width: 0;
  padding: 6px 0;
}

.ofs-apunt__card {
  padding: var(--ofs-rp) 13px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-card);
  background: var(--surface);
}
.ofs-apunt__card:hover {
  border-color: var(--border);
  box-shadow: var(--shadow);
}

.ofs-apunt--sel .ofs-apunt__card {
  border-color: var(--accent);
}

.ofs-apunt__cap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.ofs-apunt__comentari {
  flex: 1;
  min-width: 0;
  font-size: 1.1rem;
  overflow-wrap: anywhere;
  position: relative;
  max-height: 15em;
  overflow: hidden;
}
.ofs-apunt__comentari.is-obert {
  max-height: none;
}
.ofs-apunt__comentari.te-mes:not(.is-obert)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3em;
  background: linear-gradient(transparent, var(--surface));
  pointer-events: none;
}
.ofs-apunt__comentari.plain-text {
  white-space: pre-wrap;
}
.ofs-apunt__comentari img {
  max-width: 100%;
  height: auto;
}

.ofs-mes {
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.ofs-apunt__btns {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  color: var(--fg-faint);
}

.ofs-apunt__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 9px;
  margin-top: 7px;
  font-size: 1rem;
  color: var(--fg-muted);
}

.ofs-apunt__spacer {
  flex: 1;
}

.ofs-badge {
  padding: 2px 9px;
  border-radius: var(--r-seg);
  background: var(--accent-soft);
  color: var(--fg);
  font-size: 0.95rem;
  font-weight: 600;
}
.ofs-badge--auto {
  background: var(--surface-2);
  color: var(--fg-muted);
}

.ofs-meta--clic {
  cursor: pointer;
}
.ofs-meta--clic:hover {
  color: var(--accent);
}

.ofs-meta__icona {
  cursor: pointer;
}

.ofs-marca {
  padding: 1px 6px;
  border-radius: var(--r-seg);
  background: var(--danger-soft);
  color: var(--danger-fg);
  font-size: 0.85rem;
  font-weight: 700;
}

.ofs-valoracio {
  flex-basis: 100%;
}

.ofs-autor {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-muted);
  white-space: nowrap;
}

.ofs-autor__inicials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1em;
  height: 2.1em;
  flex: none;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--fg-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.ofs-timeline__buit {
  padding: 40px 0;
  text-align: center;
  color: var(--fg-muted);
}

.ofs-enllac {
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
}

.ofs-seguiment [onclick].asst-btn--primari:hover {
  color: var(--accent-fg);
}
.ofs-seguiment [onclick].ofs-btn-canal:hover, .ofs-seguiment [onclick].ofs-estat__btn:hover {
  color: var(--accent);
}

.ofs-xips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.ofs-xip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--fg-muted);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.ofs-xip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.ofs-xip.is-on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--fg);
}
.ofs-xip--dada {
  cursor: default;
}
.ofs-xip--dada:hover {
  border-color: var(--border);
  color: var(--fg-muted);
}

.ofs-xip__n {
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.65;
}

.ofs-xips.is-entrant .ofs-xip {
  animation: ofsXipEntra 0.22s ease-out both;
}
.ofs-xips.is-entrant .ofs-xip:nth-child(1) {
  animation-delay: 0s;
}
.ofs-xips.is-entrant .ofs-xip:nth-child(2) {
  animation-delay: 0.035s;
}
.ofs-xips.is-entrant .ofs-xip:nth-child(3) {
  animation-delay: 0.07s;
}
.ofs-xips.is-entrant .ofs-xip:nth-child(4) {
  animation-delay: 0.105s;
}
.ofs-xips.is-entrant .ofs-xip:nth-child(5) {
  animation-delay: 0.14s;
}
.ofs-xips.is-entrant .ofs-xip:nth-child(6) {
  animation-delay: 0.175s;
}
.ofs-xips.is-entrant .ofs-xip:nth-child(7) {
  animation-delay: 0.21s;
}
.ofs-xips.is-entrant .ofs-xip:nth-child(8) {
  animation-delay: 0.245s;
}
.ofs-xips.is-entrant .ofs-xip:nth-child(9) {
  animation-delay: 0.28s;
}
.ofs-xips.is-entrant .ofs-xip:nth-child(10) {
  animation-delay: 0.315s;
}
.ofs-xips.is-entrant .ofs-xip:nth-child(11) {
  animation-delay: 0.35s;
}
.ofs-xips.is-entrant .ofs-xip:nth-child(12) {
  animation-delay: 0.385s;
}

@media (prefers-reduced-motion: reduce) {
  .ofs-xips.is-entrant .ofs-xip {
    animation: none;
  }
}
@keyframes ofsXipEntra {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.ofs-est {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 16px 18px 20px;
}

.ofs-est__titol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 9px;
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.ofs-est__bloc .ofs-terminis {
  padding: 0;
}

.ofs-embut {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ofs-embut__pas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-soft);
}

.ofs-embut__titol {
  flex: 0 0 auto;
  min-width: 150px;
  font-size: 1.05rem;
}

.ofs-embut__barra {
  flex: 1 1 160px;
  min-width: 120px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  overflow: hidden;
}

.ofs-embut__ple {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--accent);
}

.ofs-embut__n {
  flex: none;
  min-width: 44px;
  text-align: right;
  font-size: 1.1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ofs-embut__pct {
  flex: none;
  min-width: 52px;
  text-align: right;
  font-size: 0.9rem;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

.ofs-xifres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.ofs-xifra {
  padding: 11px 13px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-card);
  background: var(--surface-2);
}

.ofs-xifra__titol {
  font-size: 0.95rem;
  color: var(--fg-muted);
}

.ofs-xifra__valor {
  margin-top: 2px;
  font-size: 1.6rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ofs-xifra__pista {
  font-size: 0.9rem;
  color: var(--fg-faint);
}

.ofs-repartiment {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

.ofs-repartiment__titol {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg-muted);
}

.sg-llista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(28em, 1fr));
  gap: 1em;
}

.sg-doc__nom {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.sg-doc__meta {
  color: var(--fg-muted);
  font-size: 0.85rem;
}

.sg-signant {
  display: flex;
  align-items: center;
  gap: 0.75em;
  flex-wrap: wrap;
  padding: 0.75em 0;
}
.sg-signant + .sg-signant {
  border-top: 1px solid var(--border-soft);
}

.sg-signant__qui {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  flex: 1 1 12em;
  min-width: 0;
}

.sg-signant__nom {
  overflow-wrap: anywhere;
}

.sg-signant__doc {
  color: var(--fg-muted);
  font-size: 0.85rem;
}

.sg-btn-signar {
  min-height: 48px;
  padding-inline: 1.25em;
  font-size: 1rem;
  flex: 0 0 auto;
}

.sg-signat {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--ok-fg);
  background: var(--ok-soft);
  border-radius: var(--r-pill);
  padding: 0.35em 0.8em;
  font-size: 0.85rem;
  white-space: nowrap;
}

.sg-caducitat {
  color: var(--fg-muted);
  font-size: 0.8rem;
}

.sg-regenera {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  flex: 0 0 auto;
}

@media (max-width: 44em) {
  .sg-btn-signar,
  .sg-regenera {
    width: 100%;
    justify-content: center;
  }
}

.psg-families {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24em, 100%), 1fr));
  gap: 1.5em;
}

.psg-familia__titol {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 0.5em;
  font-size: 14px;
  font-weight: 600;
}

.psg-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.psg-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.45em 0;
}
.psg-item + .psg-item {
  border-top: 1px solid var(--color-border);
}

.psg-item__nom {
  min-width: 0;
  overflow-wrap: anywhere;
}
.psg-item__nom small {
  color: var(--color-text-2);
  margin-left: 0.4em;
}

.psg-item__vies {
  display: flex;
  gap: 0.5em;
  flex: 0 0 auto;
}

.psg-via-icona {
  color: var(--color-text-2);
  font-size: 15px;
  cursor: help;
}

.psg-cap-via {
  font-size: 12px;
  white-space: nowrap;
}

.psg-buit {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}

.psg-enllac {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.75em;
}

.psg-info {
  color: var(--color-text-2);
  cursor: help;
  font-size: 13px;
}

.psg-vies {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  min-width: 0;
  max-width: 100%;
}

.psg-via-bloc {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  min-width: 0;
}
.psg-via-bloc:has(> .psg-via .signaturaVia:checked) {
  border-color: var(--color-text-2);
}
.psg-via-bloc:has(> .psg-via .signaturaVia:checked) > .psg-via .psg-via__nom {
  font-weight: 600;
}

.psg-via-config {
  display: flow-root;
  margin: 0 0.6em 0.6em 2.4em;
  padding: 0.2em 0.8em 0.6em;
  border-left: 3px solid var(--color-text-2);
  border-radius: 0 4px 4px 0;
  background: var(--color-fons-2);
  min-width: 0;
}
.psg-via-config[hidden] {
  display: none;
}
@media (max-width: 30rem) {
  .psg-via-config {
    margin-left: 0.6em;
  }
}

.psg-via-config__titol {
  color: var(--color-text-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.4em 0 0.2em;
}

.psg-via {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.5em 0.6em;
  border-radius: 4px;
  cursor: pointer;
}
.psg-via:hover {
  background: var(--color-hover);
}

.psg-via__icona {
  color: var(--color-text-2);
  width: 1.2em;
  text-align: center;
}

.psg-via__nom {
  flex: 1 1 auto;
  min-width: 0;
}

.psg-diagnostic {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(26em, 100%), 1fr));
  gap: 0.15em 1.5em;
}

.psg-diag {
  display: grid;
  grid-template-columns: 1.2em minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.15em 0.6em;
  padding: 0.4em 0;
}

.psg-diag__via {
  grid-area: 1/1;
  color: var(--color-text-2);
  text-align: center;
}

.psg-diag__nom {
  grid-area: 1/2;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.psg-diag__estat {
  grid-area: 2/2/auto/-1;
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  color: var(--color-text-2);
  font-size: 0.9em;
  line-height: 1.4;
  min-width: 0;
  overflow-wrap: anywhere;
}

.psg-diag--ok .psg-diag__estat {
  color: var(--color-ok, var(--color-text-2));
}

.psg-diag__codi {
  grid-area: 1/3;
  color: var(--color-text-2);
  font-size: 11px;
  opacity: 0.75;
}

.psg-peu {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.75em;
}

#dades.psg-panell form .dada {
  column-gap: 0.4em;
  max-width: 100%;
}
#dades.psg-panell form .dada > .ts-wrapper {
  flex: 0 1 auto;
  width: 16em;
  max-width: 100%;
}
#dades.psg-panell form .dada > input[type=url], #dades.psg-panell form .dada > input[type=text] {
  flex: 1 1 16em;
  min-width: min(16em, 100%);
}
#dades.psg-panell form .dada > small {
  flex-basis: 100%;
  white-space: normal;
  line-height: 1.4;
  padding-bottom: 0.3em;
  overflow-wrap: anywhere;
}
#dades.psg-panell form .dada > small:has(> i:first-child), #dades.psg-panell form .dada.textAlerta {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  white-space: normal;
  line-height: 1.4;
}
#dades.psg-panell form .dada.full > label {
  white-space: normal;
  line-height: 1.4;
}
@media (max-width: 30rem) {
  #dades.psg-panell form .dada {
    flex-wrap: wrap;
  }
  #dades.psg-panell form .dada.half {
    width: 100%;
  }
  #dades.psg-panell form .dada > label {
    white-space: normal;
  }
}

#dades.psg-panell {
  grid-template-columns: minmax(0, 1fr);
}
#dades.psg-panell > .apartat {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.psg-avis {
  grid-column: 1/-1;
  display: flex;
  align-items: baseline;
  line-height: 1.4;
  gap: 0.5em;
  padding: 0.5em 0.6em;
}

.sg-lot {
  display: flex;
  align-items: center;
  gap: 1em;
  flex-wrap: wrap;
  padding: 1em;
  margin-bottom: 1em;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-card, 6px);
  background: var(--bg-soft, transparent);
}

.sg-lot__text {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  flex: 1 1 18em;
  min-width: 0;
}
.sg-lot__text small {
  color: var(--fg-muted);
}

.sg-lot__puja {
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex-wrap: wrap;
}

.apc-estat--lliure {
  --apc-c: var(--ok);
  --apc-bg: var(--ok-soft);
  --apc-fg: var(--ok-fg);
}

.apc-estat--ocupada {
  --apc-c: var(--accent);
  --apc-bg: var(--accent-soft);
  --apc-fg: var(--fg);
}

.apc-estat--venc {
  --apc-c: var(--pending);
  --apc-bg: var(--pending-soft);
  --apc-fg: var(--pending-fg);
}

.apc-estat--recuperar {
  --apc-c: var(--danger);
  --apc-bg: var(--danger-soft);
  --apc-fg: var(--danger-fg);
}

.apc-estat--noUtil {
  --apc-c: var(--fg-faint);
  --apc-bg: var(--surface-2);
  --apc-fg: var(--fg-muted);
}

.apc-app {
  position: relative;
}

.apc-inici {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.apc-molla {
  color: var(--fg-faint);
  font-size: 12px;
  margin: 0 4px;
}

.apc-topbar-nom {
  margin: 0;
  font-weight: 500;
  color: var(--fg-muted);
}

/* A pantalla estreta, les accions del centre (coworking) passen a una segona línia de la barra. */
@media (max-width: 720px) {
  .apc-app .asst-topbar {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--h-topbar);
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .apc-topbar-nom {
    min-width: 0;
    flex: 1 1 0;
  }
}

.apc-resum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.apc-resum__xifra {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-card);
  font: inherit;
  color: var(--fg);
}

.apc-resum__xifra--total {
  background: transparent;
  border-color: transparent;
  padding-left: 0;
}

.apc-resum__n {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-size: 16px;
}

.apc-resum__nom {
  font-size: 12.5px;
  color: var(--fg-muted);
}

button.apc-filtre {
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

button.apc-filtre:hover {
  background: var(--surface-2);
}

button.apc-filtre.is-on {
  border-color: var(--apc-c);
  background: var(--apc-bg);
  box-shadow: inset 0 0 0 1px var(--apc-c);
}

.apc-punt {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--apc-c);
  flex: none;
}

.apc-cerca {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 340px;
}

.apc-cerca i {
  position: absolute;
  left: 12px;
  color: var(--fg-faint);
  font-size: 13px;
}

.apc-cerca .asst-input {
  padding-left: 34px;
}

.apc-barra {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--surface-2);
}

.apc-barra--buida {
  opacity: 0.6;
}

.apc-barra__tram {
  background: var(--apc-c);
  height: 100%;
}

.apc-barra__tram + .apc-barra__tram {
  border-left: 2px solid var(--surface);
}

.apc-targetes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

a.apc-targeta,
a.apc-targeta:link,
a.apc-targeta:visited,
a.apc-targeta:hover {
  color: var(--fg);
}

.apc-targeta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-card);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.apc-targeta:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--fg) 8%, transparent);
  transform: translateY(-1px);
}

.apc-targeta__cap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.apc-targeta__nom {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
}

.apc-targeta__adreca,
.apc-cap__adreca {
  font-size: 12.5px;
  color: var(--fg-muted);
}

.apc-targeta__xifres {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12.5px;
  color: var(--fg-muted);
}

.apc-targeta__xifres b {
  color: var(--fg);
  font-family: "IBM Plex Mono", monospace;
}

.apc-targeta__avisos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.apc-eines {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.apc-targeta[hidden],
.apc-targetes[hidden],
.apc-vista-mapa[hidden],
.apc-cap-resultat[hidden] {
  display: none;
}

.apc-mapa-geo {
  height: min(620px, 100vh - 330px);
  min-height: 360px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-card);
  overflow: hidden;
}

.apc-mapa-nota {
  margin-top: 8px;
  font-size: 12px;
  color: var(--fg-muted);
}

.apc-pin-embolcall {
  background: none;
  border: 0;
}

.apc-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--surface);
  border-radius: 17px;
  background: var(--apc-c);
  color: var(--surface);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--fg) 30%, transparent);
  cursor: pointer;
}

.apc-popup {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
  font-family: "IBM Plex Sans", var(--font-family), sans-serif;
}

.apc-popup__xifres {
  color: var(--fg-muted);
  font-size: 12px;
}

a.apc-popup .asst-btn--primari,
.apc-popup a.asst-btn--primari:link,
.apc-popup a.asst-btn--primari:visited {
  align-self: flex-start;
  color: var(--accent-fg);
}

.apc-cap__text {
  min-width: 0;
}

.apc-panell__accions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.apc-planta + .apc-planta {
  margin-top: 22px;
}

.apc-planta--sense {
  display: none;
}

.apc-planta__titol {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
}

.apc-planta__n {
  font-weight: 400;
  color: var(--fg-faint);
  font-size: 12px;
}

.apc-mapa {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 6px;
}

.apc-placa {
  height: 40px;
  min-width: 0;
  padding: 0 2px;
  border: 1.5px solid var(--apc-c);
  border-radius: 7px;
  background: var(--apc-bg);
  color: var(--apc-fg);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: transform 0.12s, box-shadow 0.12s, opacity 0.15s;
}

.apc-placa.apc-estat--noUtil {
  background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--surface) 6px 12px);
  border-style: dashed;
}

.apc-placa:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--apc-c) 30%, transparent);
}

.apc-placa.is-on {
  outline: 3px solid var(--apc-c);
  outline-offset: 2px;
  transform: scale(1.06);
}

.apc-placa--apagada {
  opacity: 0.14;
}

.apc-llegenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  font-size: 12px;
  color: var(--fg-muted);
}

.apc-llegenda > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.apc-dades > summary {
  cursor: pointer;
  list-style: none;
}

.apc-dades > summary::-webkit-details-marker {
  display: none;
}

.apc-graella {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px 16px;
}

.apc-graella--2 {
  grid-template-columns: 1fr 1fr;
}

.apc-camp {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.apc-camp--ample {
  grid-column: 1/-1;
}

.apc-camp--check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  align-self: end;
  min-height: var(--h-input);
  font-size: 13px;
}

.apc-camp[hidden] {
  display: none;
}

.apc-accions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.apc-missatge {
  margin-right: auto;
  font-size: 12.5px;
}

.apc-missatge--ok {
  color: var(--ok-fg);
}

.apc-missatge--error {
  color: var(--danger-fg);
}

.apc-dialeg {
  width: min(560px, 100vw - 32px);
}

.apc-dialeg .asst-dialeg__peu .apc-missatge {
  margin-right: auto;
}

.apc-dialeg .asst-ajuda {
  margin: 0 0 14px;
  max-width: none;
}

.apc-panell {
  position: absolute;
  top: var(--h-topbar);
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  width: min(470px, 100%);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -10px 0 30px color-mix(in srgb, var(--fg) 10%, transparent);
  animation: apcEntra 0.18s ease-out;
}

.apc-panell[hidden] {
  display: none;
}

@keyframes apcEntra {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.apc-panell__cap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border-soft);
}

.apc-panell__sub {
  font-size: 12px;
  color: var(--fg-muted);
}

.apc-panell__titol {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 700;
}

.apc-panell__cos {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 40px;
}

.apc-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--apc-bg);
  color: var(--apc-fg);
  border: 1px solid var(--apc-c);
  font-size: 12px;
  font-weight: 600;
}

.apc-seccio {
  padding: 14px 0 18px;
}

.apc-seccio + .apc-seccio {
  border-top: 1px solid var(--border-soft);
}

.apc-seccio__titol {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
}

.apc-buit {
  margin: 0 0 12px;
  color: var(--fg-muted);
  font-size: 13px;
}

.apc-fet {
  margin-bottom: 8px;
}

.apc-botons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.apc-titulars {
  margin-top: 14px;
}

.apc-titulars__cap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.apc-titulars__n {
  padding: 0 7px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--fg);
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0;
}

.apc-titular {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--surface);
}

.apc-titular + .apc-titular {
  margin-top: 6px;
}

.apc-titular--baixa {
  background: var(--surface-2);
  opacity: 0.75;
}

.apc-titular__icona {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  flex: none;
}

.apc-titular__cos {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.apc-titular__nom {
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
}

.apc-titular__nom:hover {
  text-decoration: underline;
}

.apc-titular__meta {
  font-size: 12px;
  color: var(--fg-muted);
}

.apc-titular__pct {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--fg-muted);
}

.apc-historial {
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px;
  border-left: 2px solid var(--border-soft);
}

.apc-historial__fet {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0 12px 8px;
  font-size: 13px;
}

.apc-historial__fet::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--fg-faint);
}

.apc-historial--alta::before,
.apc-historial--inici::before,
.apc-historial--recuperacio::before {
  border-color: var(--ok);
}

.apc-historial--baixa::before,
.apc-historial--fi::before {
  border-color: var(--danger);
}

.apc-historial__data {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  color: var(--fg-muted);
}

.apc-anteriors {
  margin-top: 10px;
}

.apc-anteriors > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--accent);
}

.apc-anterior {
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 10px;
}

.apc-form--pas .apc-seccio__titol {
  font-size: 15px;
  margin-bottom: 14px;
}

.apc-surten {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.apc-surt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  cursor: pointer;
}

.apc-surt:has(input:checked) {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.apc-surt span:first-of-type {
  flex: 1;
}

.apc-selector__tria {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.apc-selector__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 12px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--accent-soft);
}

.apc-selector__nom {
  flex: 1;
  font-weight: 600;
  min-width: 0;
}

.apc-selector__item .apc-selector__pct {
  width: 72px;
  height: 32px;
  text-align: right;
}

.apc-selector__cerca {
  position: relative;
  display: flex;
  align-items: center;
}

.apc-selector__cerca > i {
  position: absolute;
  left: 12px;
  color: var(--fg-faint);
  font-size: 13px;
}

.apc-selector__cerca > .asst-input {
  padding-left: 34px;
}

.apc-selector__llista {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 5;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--fg) 14%, transparent);
}

.apc-selector__llista[hidden] {
  display: none;
}

.apc-selector__opcio {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.apc-selector__opcio:hover {
  background: var(--surface-2);
}

.apc-selector__opcio span:first-of-type {
  flex: 1;
}

.apc-selector__doc,
.apc-selector__cap {
  font-size: 12px;
  color: var(--fg-muted);
}

.apc-selector__cap {
  padding: 8px 10px;
}

.apc-espera__titol {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
}

.apc-espera + .apc-espera__titol {
  margin-top: 16px;
}

.apc-espera .asst-taula__tr {
  align-items: center;
}

.apc-posicio {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--fg-muted);
}

.apc-espera__obs {
  display: block;
  font-size: 12px;
}

.apc-espera__accions {
  display: flex;
  justify-content: flex-end;
  gap: 2px;
}

.apc-espera__filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 12px;
}
.apc-espera__filtres label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.apc-espera__filtres .asst-label {
  margin: 0;
}
.apc-espera__filtres select {
  width: auto;
}

.apc-distintiu {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  vertical-align: middle;
  background: var(--surface-2);
  color: var(--fg-muted);
}

.apc-distintiu--pmr {
  background: var(--pending-soft);
  color: var(--pending-fg);
}

.apc-dialeg__qui {
  margin: 0 0 10px;
}

.apc-selector-sol .apc-selector__pct,
.apc-selector-sol .apc-selector__pct + span {
  display: none;
}

.apc-selector-sol {
  margin-bottom: 12px;
}

.apc-candidat {
  align-items: center;
}

.apc-candidat--primer {
  background: var(--accent-soft, var(--surface-2));
  border-radius: 8px;
}

.apc-mapa-cap {
  flex-wrap: nowrap;
  gap: 10px;
}

.apc-mapa-cap .asst-card__titol {
  flex: none;
}

.apc-mapa-cap .asst-seg {
  padding: 2px;
}

.apc-mapa-cap .asst-seg__btn {
  padding: 3px 10px;
  font-size: 12px;
}

.apc-plantes {
  display: flex;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.apc-planta-btn {
  flex: none;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--fg-muted);
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.apc-planta-btn.is-on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--fg);
  font-weight: 600;
}

.apc-grup--amagat,
#apcVistaPlaces[hidden],
#apcVistaPlanol[hidden] {
  display: none !important;
}

.apc-planol-grup + .apc-planol-grup {
  margin-top: 22px;
}

.apc-planol {
  margin: 0 auto;
  width: fit-content;
}

.apc-dades__peu {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--border-soft);
}

.apc-dades__peu .asst-ajuda {
  margin: 0;
}

#espaiEspaisInterior[hidden],
.esp-planol[hidden] {
  display: none !important;
}

.esp-vista {
  margin-right: 8px;
}

.esp-planol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
}

.esp-planol__llenc {
  position: relative;
  max-width: 100%;
  line-height: 0;
}

.esp-planol__llenc > img {
  max-width: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

.esp-planol__casella {
  position: absolute;
  transform: translate(-50%, -50%);
  height: 22px;
  min-width: 24px;
  padding: 0 4px;
  border-radius: 5px;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
  touch-action: none;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--fg) 25%, transparent);
}

.esp-planol__casella:hover {
  transform: translate(-50%, -50%) scale(1.15);
  z-index: 2;
}

.esp-planol__casella.is-on {
  transform: translate(-50%, -50%) scale(1.25);
  z-index: 3;
}

.esp-planol__casella--tipus {
  --apc-c: var(--border-strong);
  --apc-bg: var(--surface);
  --apc-fg: var(--fg);
}

.esp-planol .apc-llegenda {
  margin-top: 6px;
  padding-top: 8px;
}

.esp-planol__ajuda {
  margin: 0;
  font-size: 12px;
  color: var(--fg-muted);
}

@media (max-width: 900px) {
  .apc-espera {
    --asst-cols: 2rem 1fr 4.5rem !important;
  }
  .apc-espera .asst-taula__tr > :nth-child(n+3):not(:last-child) {
    display: none;
  }
  .apc-graella--2 {
    grid-template-columns: 1fr;
  }
  .apc-cerca {
    min-width: 0;
    flex: 1 1 100%;
  }
}

.novetat-pendent {
  position: relative;
}
.novetat-pendent::after {
  content: "";
  position: absolute;
  top: -0.2em;
  right: -0.2em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--color-avis);
  box-shadow: 0 0 0 0.12em var(--color-fons);
  pointer-events: none;
}

[data-columna-mou] {
  cursor: grab;
}
[data-columna-mou].columna-mou-origen {
  opacity: 0.5;
}
[data-columna-mou].columna-mou-abans {
  box-shadow: inset 3px 0 0 var(--color-primari, #1a73e8);
}
[data-columna-mou].columna-mou-despres {
  box-shadow: inset -3px 0 0 var(--color-primari, #1a73e8);
}

.columnes-ordre-pendent tbody,
.columnes-ordre-pendent.table-div > div:not(:first-child) {
  opacity: 0.45;
}

.tr-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--color-fons-modal, rgba(0, 0, 0, 0.45));
}
.tr-overlay.visible {
  display: flex;
}

.tr-modal {
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow: auto;
  border-radius: 6px;
  background: var(--color-fons);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.tr-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-clar-3);
  font-weight: bold;
}

.tr-tanca {
  cursor: pointer;
  background: none;
  color: inherit;
}

.tr-cos {
  display: flex;
  flex-flow: column;
  gap: 14px;
  padding: 16px;
}

.tr-camp {
  display: flex;
  flex-flow: column;
  gap: 4px;
}
.tr-camp > label {
  font-weight: bold;
}
.tr-camp > small {
  color: var(--color-text-suau, #888);
}

.tr-docs {
  display: flex;
  flex-flow: column;
  gap: 4px;
  max-height: 220px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--color-clar-3);
  border-radius: 4px;
}
.tr-docs label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: normal;
}

.tr-especial {
  padding: 0 5px;
  border-radius: 3px;
  background: var(--color-clar-3);
  font-size: 11px;
}

.tr-avis {
  padding: 8px 10px;
  border-radius: 4px;
  background: #fef3c7;
  color: #92400e;
}

.tr-error {
  padding: 8px 10px;
  border-radius: 4px;
  background: #fee2e2;
  color: #991b1b;
}

.tr-ok {
  padding: 8px 10px;
  border-radius: 4px;
  background: #dcfce7;
  color: #166534;
}

.tr-peu {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-clar-3);
}
.tr-peu button {
  height: 25px;
}

.tr-buit {
  color: var(--color-text-suau, #888);
  font-style: italic;
}

.proc-seguiment {
  margin-top: 1em;
  text-align: left;
}

.proc-barra {
  height: 6px;
  border-radius: 999px;
  background: var(--color-fons-2);
  overflow: hidden;
}

.proc-barra__omplert {
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: #1976d2;
  transition: width 0.4s ease;
}

.proc-pas {
  margin: 0.6em 0 0;
  font-size: 13px;
  color: var(--color-text-2);
}

.proc-resultat {
  margin: 0.6em 0 0;
  padding: 0.5em 0.7em;
  border-radius: 6px;
  background: var(--color-fons-2);
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 12em;
  overflow: auto;
}

.proc-peu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8em;
  margin: 0.8em 0 0;
  font-size: 12px;
  color: var(--color-text-2);
}

.proc-peu .proc-enllac {
  margin-left: auto;
}

.proc-estat--curs {
  color: #1976d2;
}

.proc-barra__omplert.proc-estat--curs {
  background: #1976d2;
}

.proc-estat--ok {
  color: #2e7d32;
}

.proc-barra__omplert.proc-estat--ok {
  background: #2e7d32;
}

.proc-estat--error {
  color: #c62828;
}

.proc-barra__omplert.proc-estat--error {
  background: #c62828;
}

.proc-estat--avortat {
  color: var(--color-avis);
}

.proc-barra__omplert.proc-estat--avortat {
  background: var(--color-avis);
}

:root.dark .proc-estat--curs {
  color: #64b5f6;
}
:root.dark .proc-estat--ok {
  color: #66bb6a;
}
:root.dark .proc-estat--error {
  color: #ef5350;
}

.proc-llista {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.proc-item {
  display: grid;
  grid-template-columns: 1.6em 1fr auto;
  align-items: start;
  gap: 0.1em 0.6em;
  padding: 0.5em 0.6em;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-fons);
}

.proc-item__icona {
  grid-row: 1/span 3;
  align-self: center;
  text-align: center;
  font-size: 14px;
}

.proc-item__titol {
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text);
  word-break: break-word;
}

.proc-item__meta {
  grid-column: 3;
  grid-row: 1;
  font-size: 11px;
  color: var(--color-text-2);
  white-space: nowrap;
}

.proc-item__pas {
  grid-column: 2/span 2;
  font-size: 12px;
  color: var(--color-text-2);
  word-break: break-word;
}

.proc-item .proc-barra {
  grid-column: 2/span 2;
  margin-top: 0.35em;
}

.proc-item__buit {
  padding: 0.8em;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-2);
}

.proc-item__cancela {
  grid-column: 2/span 2;
  justify-self: start;
  margin-top: 0.3em;
  font-size: 11px;
  color: var(--color-perill);
}

.proc-item__cancela--pendent {
  color: var(--color-text-2);
  font-style: italic;
}

.proc-filtre {
  padding: 0.15em 0.7em;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.proc-filtre--actiu {
  border-color: var(--color3, #0077cc);
  background: var(--color3, #0077cc);
  color: var(--color-text-invertit, #fff);
}

a.proc-filtre--actiu,
a.proc-filtre--actiu:link,
a.proc-filtre--actiu:visited,
a.proc-filtre--actiu:hover {
  color: var(--color-text-invertit, #fff);
}

.proc-limit {
  font-size: 12px;
  color: var(--color-text-2);
}
.proc-limit select {
  width: auto;
  height: 22px;
  padding: 0 0.2em;
  font-size: 12px;
}

.proc-total {
  margin-top: 0.6em;
  font-size: 12px;
  color: var(--color-text-2);
}

.proc-menu-wrap {
  position: relative;
  display: inline-block;
}

.proc-badge {
  position: absolute;
  top: -0.4em;
  right: -0.6em;
  min-width: 1.5em;
  padding: 0 0.3em;
  border-radius: 999px;
  background: var(--color-avis);
  color: #fff;
  font-size: 10px;
  line-height: 1.5em;
  text-align: center;
}

.proc-desplegable {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 60;
  width: 340px;
  max-width: 90vw;
  max-height: 60vh;
  overflow: auto;
  padding: 0.6em;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-fons);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  color: var(--color-text);
  font-size: 13px;
  text-align: left;
  cursor: default;
  white-space: normal;
  text-transform: none;
}

.proc-desplegable__peu {
  display: block;
  margin-top: 0.6em;
  text-align: right;
  font-size: 12px;
}

#dades.segonPla {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem 0.8rem;
  box-sizing: border-box;
  overflow-x: hidden;
}
#dades.segonPla .apartat {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 34rem;
  margin: 0;
  padding: 2em 2em 1.6em;
  border-radius: 10px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
  text-align: center;
}
#dades.segonPla .apartat::after {
  content: none;
}
#dades.segonPla .icona-segonPla {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6em;
  height: 2.6em;
  margin: 0 auto 0.9em;
  border-radius: 50%;
  background: var(--color-fons-2);
  font-size: 18px;
}
#dades.segonPla .etiqueta-segonPla {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-2);
}
#dades.segonPla .missatge-segonPla {
  position: static;
  margin: 0.35em 0 0;
  padding: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text);
  word-break: break-word;
}
#dades.segonPla .espera-segonPla {
  margin: 0.6em 0 0;
  font-size: 13px;
  color: var(--color-text-2);
}
#dades.segonPla .avis-segonPla {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  margin: 1.2em 0 0;
  padding: 0.6em 0.8em;
  border-left: 3px solid #1976d2;
  border-radius: 6px;
  background: var(--color-fons-2);
  font-size: 13px;
  text-align: left;
  color: var(--color-text);
}
#dades.segonPla .nota-segonPla {
  margin: 0.9em 0 0;
  font-size: 12px;
  color: var(--color-text-2);
}
#dades.segonPla .proc-seguiment {
  margin-top: 1.4em;
  padding-top: 1.2em;
  border-top: 1px solid var(--color-border);
}

:root.dark #dades.segonPla .apartat {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}
:root.dark #dades.segonPla .avis-segonPla {
  border-left-color: #64b5f6;
}

/* Ofertes d'interès: llista d'ofertes proposades a una persona amb el % d'encaix.
   Component autocontingut, @importat al final d'estilsNou.scss. */
/* Tons propis: els semàntics del tema (--color-avis és un groc clar) no tenen prou
   contrast com a color de text. Es declaren aquí amb el seu equivalent en fosc. */
.enc-app {
  --enc-ok: #1e8e3e;
  --enc-parcial: #b26500;
  --enc-no: #c5221f;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

html.dark .enc-app {
  --enc-ok: #6dd58c;
  --enc-parcial: #ffb74d;
  --enc-no: #f28b82;
}

.enc-filtres {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: smaller;
}

.enc-buit {
  padding: 12px;
  opacity: 0.75;
}

/* La taula pot ser més ampla que el contenidor: l'scroll va aquí, mai al body. */
.enc-taula-wrap {
  overflow-x: auto;
}

table.enc-taula {
  width: 100%;
  border-collapse: collapse;
}
table.enc-taula th, table.enc-taula td {
  padding: 4px 6px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}
table.enc-taula th {
  white-space: nowrap;
  font-weight: 600;
}
table.enc-taula tr.enc-fila--candidat {
  opacity: 0.6;
}

/* Percentatge d'encaix: barra + xifra. El color surt del tram, no d'un degradat
   continu, perquè el número no suggereixi més precisió de la que hi ha. */
.enc-punt {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.enc-punt__barra {
  position: relative;
  width: 60px;
  height: 6px;
  border-radius: 3px;
  background: var(--color-border);
  overflow: hidden;
}
.enc-punt__barra > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: currentColor;
}

.enc-punt__xifra {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.enc-punt--alt {
  color: var(--enc-ok);
}

.enc-punt--mig {
  color: var(--enc-parcial);
}

.enc-punt--baix {
  color: var(--enc-no);
}

/* Xips de dimensió: el perquè de la puntuació, un per criteri avaluat. */
.enc-dims {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.enc-dim {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  font-size: smaller;
  white-space: nowrap;
  cursor: help;
}
.enc-dim::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.enc-dim--ok {
  color: var(--enc-ok);
}

.enc-dim--parcial {
  color: var(--enc-parcial);
}

.enc-dim--no {
  color: var(--enc-no);
}

.enc-marca {
  font-size: smaller;
  opacity: 0.7;
}

.dup-taula tbody + tbody {
  border-top: 1px solid var(--color-border);
}
.dup-taula .dup-capcalera td {
  background: var(--color-fons-2);
  padding: 0.3em 0.5em;
}
.dup-taula .dup-nom {
  cursor: pointer;
}
.dup-taula .dup-fusiona {
  cursor: pointer;
}
.dup-taula .dup-desti td {
  font-weight: 600;
}

.dup-punts {
  display: inline-block;
  min-width: 1.8em;
  padding: 0.1em 0.4em;
  margin-right: 0.5em;
  border-radius: 1em;
  text-align: center;
  font-weight: 600;
  color: var(--color-text-invertit);
  background: var(--color-text-2);
}

.dup-punts-alta {
  background: var(--color-perill);
}

.dup-punts-mitjana {
  background: var(--color-avis);
  color: var(--color-fosc-2);
}

.dup-senyals {
  margin-right: 0.5em;
}

.dup-criteri {
  color: var(--color-text-2);
  font-size: smaller;
}

.dup-buit {
  padding: 1em;
  color: var(--color-text-2);
}

/* Fitxes duplicades que la sessió no veu (#248443): només id, alta i creador. */
.dup-oculta td {
  color: var(--color-text-2);
}

.dup-demana {
  float: right;
  cursor: pointer;
}

.dup-demanada {
  opacity: 0.6;
}

.ev-app {
  --ev-accent: var(--apl-primary, #12a37b);
  --ev-accent-fg: #fff;
  --ev-accent-fosc: color-mix(in oklab, var(--ev-accent) 78%, black);
  --ev-accent-tint: color-mix(in oklab, var(--ev-accent) 11%, white);
  --ev-accent-vora: color-mix(in oklab, var(--ev-accent) 45%, white);
  --ev-fg: #1a1f1c;
  --ev-fg-2: #4a534f;
  --ev-fg-3: #7c847f;
  --ev-fg-4: #98a09d;
  --ev-surface: #fff;
  --ev-surface-2: #fafbfa;
  --ev-surface-3: #f4f7f6;
  --ev-hover: #f0f5f3;
  --ev-border: #dfe3e1;
  --ev-border-2: #eceeed;
  --ev-border-3: #f1f3f2;
  --ev-pista: #e9ecea;
  --ev-ocupat: #b06a2c;
  --ev-buit: #0f8f6c;
  --ev-baixa: #c0392b;
  --ev-cap: #b9c0bd;
  --ev-indent-pas: 26px;
  --ev-indent-guia: 13px;
  --ev-alt: 70vh;
  display: flex;
  flex-direction: column;
  min-height: 0;
  font-size: 13px;
  color: var(--ev-fg);
  background: var(--ev-surface);
  -webkit-font-smoothing: antialiased;
}

html.dark .ev-app {
  --ev-accent-fosc: color-mix(in oklab, var(--ev-accent) 76%, white);
  --ev-accent-tint: color-mix(in oklab, var(--ev-accent) 22%, #2a2e32);
  --ev-accent-vora: color-mix(in oklab, var(--ev-accent) 48%, #2a2e32);
  --ev-fg: var(--color-clar-2);
  --ev-fg-2: var(--color-clar-3);
  --ev-fg-3: #a6a49c;
  --ev-fg-4: #918f88;
  --ev-surface: var(--color-fosc-2);
  --ev-surface-2: #23272a;
  --ev-surface-3: #2f3438;
  --ev-hover: #343a3e;
  --ev-border: var(--color-fosc-4);
  --ev-border-2: var(--color-fosc-3);
  --ev-border-3: var(--color-fosc-3);
  --ev-pista: var(--color-fosc-3);
  --ev-ocupat: #e0a163;
  --ev-buit: #5cc9a4;
  --ev-baixa: #e8867a;
  --ev-cap: #6c7370;
}

.ev-badge {
  flex: 0 0 auto;
  display: inline-block;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  background: var(--ev-pista);
  color: var(--ev-fg-2);
}
.ev-badge.ev-badge--1 {
  background: var(--ev-accent-fosc);
  color: var(--ev-accent-fg);
}
.ev-badge.ev-badge--2 {
  background: var(--ev-accent);
  color: var(--ev-accent-fg);
}
.ev-badge.ev-badge--3 {
  background: color-mix(in oklab, var(--ev-accent) 72%, white);
  color: var(--ev-accent-fg);
}
.ev-badge.ev-badge--4 {
  background: color-mix(in oklab, var(--ev-accent) 45%, white);
  color: var(--ev-accent-fosc);
}
.ev-badge.ev-badge--5 {
  background: var(--ev-accent-tint);
  color: var(--ev-accent-fosc);
}

html.dark .ev-app .ev-badge--4,
html.dark .ev-app .ev-badge--5 {
  color: var(--color-fosc-1);
}

.ev-xip {
  flex: 0 0 auto;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--ev-surface-3);
  color: var(--ev-fg-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ev-xip i {
  margin-right: 3px;
  opacity: 0.7;
}

.ev-buit {
  padding: 30px 14px;
  text-align: center;
  color: var(--ev-fg-3);
}

.ev-estat {
  font-size: 11.5px;
  white-space: nowrap;
}
.ev-estat.ev-estat--ocupat {
  color: var(--ev-ocupat);
}
.ev-estat.ev-estat--buit {
  color: var(--ev-buit);
}
.ev-estat.ev-estat--baixa {
  color: var(--ev-baixa);
}

.ev-link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--ev-fg-2);
  font-size: 11.5px;
  cursor: pointer;
}
.ev-link:hover {
  color: var(--ev-accent-fosc);
}

.ev-boto {
  border: 1px solid var(--ev-border);
  background: var(--ev-surface);
  color: var(--ev-fg);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12.5px;
  cursor: pointer;
}
.ev-boto:hover {
  border-color: var(--ev-fg-3);
}
.ev-boto.ev-boto--principal {
  background: var(--ev-accent);
  border-color: var(--ev-accent);
  color: var(--ev-accent-fg);
}
.ev-boto.ev-boto--principal:hover {
  background: var(--ev-accent-fosc);
}

.ev-llegenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 7px 12px;
  background: var(--ev-surface-2);
  border-top: 1px solid var(--ev-border-2);
  border-bottom: 1px solid var(--ev-border-2);
}

.ev-llegenda-nivells {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.ev-llegenda-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ev-llegenda-txt {
  color: var(--ev-fg-3);
  font-size: 11.5px;
}

.ev-llegenda-accions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ev-llegenda-cap {
  color: var(--ev-fg-4);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.ev-cos {
  display: flex;
  min-height: 0;
  max-height: var(--ev-alt);
}

.ev-files {
  flex: 1 1 auto;
  min-width: 0;
  overflow: auto;
}

.ev-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 0;
  border-bottom: 1px solid var(--ev-border-3);
  cursor: pointer;
  transition: background 140ms ease;
}
.ev-fila:hover {
  background: var(--ev-hover);
}
.ev-fila.ev-fila--n1.ev-fila--conte {
  background: var(--ev-surface-3);
  padding-top: 10px;
  padding-bottom: 10px;
}
.ev-fila.ev-fila--n2.ev-fila--conte {
  background: var(--ev-surface-2);
}
.ev-fila.ev-fila--coincident {
  background: var(--ev-accent-tint);
  box-shadow: inset 3px 0 0 var(--ev-accent);
}
.ev-fila.ev-fila--sel {
  background: var(--ev-accent-tint);
  box-shadow: inset 3px 0 0 var(--ev-accent-fosc);
}
.ev-fila.ev-fila--baixa .ev-nom {
  text-decoration: line-through;
  color: var(--ev-fg-3);
}

.ev-indent {
  flex: 0 0 auto;
  align-self: stretch;
  width: calc(var(--ev-nivell, 0) * var(--ev-indent-pas));
  background-image: repeating-linear-gradient(to right, var(--ev-border-2) 0 1px, transparent 1px var(--ev-indent-pas));
  background-position: var(--ev-indent-guia) 0;
}

.ev-caret {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-left: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ev-fg-2);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.22, 0.7, 0.25, 1), color 140ms ease;
}
.ev-caret[aria-expanded=true] {
  transform: rotate(90deg);
}
.ev-caret.ev-caret--buit {
  cursor: default;
}

.ev-nom {
  flex: 0 1 auto;
  min-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.ev-fila--n1.ev-fila--conte .ev-nom {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ev-fila--n2.ev-fila--conte .ev-nom {
  font-size: 14.5px;
  font-weight: 600;
}

.ev-fila--n3.ev-fila--conte .ev-nom {
  font-size: 13.5px;
  font-weight: 600;
}

.ev-fila--conte .ev-nom {
  font-weight: 600;
}

.ev-fila--n6 .ev-nom {
  color: var(--ev-fg-2);
}

.ev-sub {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ev-fg-3);
  font-size: 11.5px;
}

.ev-espaiador {
  flex: 1 1 auto;
}

.ev-barra {
  flex: 0 0 auto;
  width: 130px;
  height: 6px;
  border-radius: 4px;
  background: var(--ev-pista);
  overflow: hidden;
}
.ev-barra.ev-barra--buida {
  background: none;
}

.ev-barra-plena {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: color-mix(in oklab, var(--ev-accent) 60%, white);
}

.ev-fila--n1 .ev-barra-plena {
  background: var(--ev-accent);
}

.ev-fila--n2 .ev-barra-plena {
  background: color-mix(in oklab, var(--ev-accent) 78%, white);
}

.ev-valor {
  flex: 0 0 auto;
  width: 86px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ev-valor.ev-valor--num {
  font-weight: 600;
}

.ev-app--amb-calaix .ev-barra {
  display: none;
}
.ev-app--amb-calaix .ev-valor {
  width: 56px;
}

@keyframes ev-fila-entra {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.ev-anima {
  animation: ev-fila-entra 260ms cubic-bezier(0.22, 0.7, 0.25, 1) both;
  animation-delay: var(--ev-retard, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .ev-anima {
    animation: none;
  }
  .ev-caret {
    transition: none;
  }
}
.ev-calaix {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px 18px;
  overflow-y: auto;
  background: var(--ev-surface-2);
  border-left: 1px solid var(--ev-border);
}

.ev-calaix-cap {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.ev-calaix-titol {
  flex: 1 1 auto;
  min-width: 0;
}

.ev-calaix-nivell {
  display: block;
  color: var(--ev-fg-4);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.ev-calaix-nom {
  display: block;
  font-size: 16px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.ev-calaix-tanca {
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: var(--ev-fg-3);
  cursor: pointer;
  padding: 2px 4px;
}
.ev-calaix-tanca:hover {
  color: var(--ev-fg);
}

.ev-calaix-cami {
  margin: 0;
  color: var(--ev-fg-3);
  font-size: 11.5px;
}

.ev-calaix-camps {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  background: var(--ev-border-2);
  border-radius: 5px;
  overflow: hidden;
}
.ev-calaix-camps .ev-camp {
  display: flex;
  gap: 10px;
  padding: 7px 10px;
  background: var(--ev-surface);
}
.ev-calaix-camps dt {
  flex: 0 0 40%;
  color: var(--ev-fg-3);
  font-size: 11.5px;
}
.ev-calaix-camps dd {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.ev-calaix-botons {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ev-cols {
  display: flex;
  align-items: stretch;
  height: var(--ev-alt);
  overflow-x: auto;
}

.ev-col {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--ev-border-2);
}
.ev-col.ev-col--detall {
  flex: 0 0 280px;
  background: var(--ev-surface-2);
}

.ev-col-cap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--ev-surface-2);
  border-bottom: 1px solid var(--ev-border-2);
}

.ev-col-nom {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ev-fg-3);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ev-col-num {
  flex: 0 0 auto;
  color: var(--ev-fg-4);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.ev-col-cos {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.ev-col--detall .ev-col-nom {
  color: var(--ev-fg);
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

.ev-col--detall .ev-col-cos {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px;
}

.ev-col-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--ev-border-3);
  cursor: pointer;
  transition: background 140ms ease;
}
.ev-col-item:hover {
  background: var(--ev-hover);
}
.ev-col-item.ev-col-item--sel {
  background: var(--ev-accent-tint);
  box-shadow: inset 3px 0 0 var(--ev-accent);
}

.ev-col-text {
  flex: 1 1 auto;
  min-width: 0;
}

.ev-col-item-nom {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ev-col-item-sub {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ev-fg-3);
  font-size: 11px;
}

.ev-col-item-val {
  flex: 0 0 auto;
  color: var(--ev-fg-3);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.ev-col-fletxa {
  flex: 0 0 auto;
  color: var(--ev-fg-4);
}
.ev-col-fletxa.ev-col-fletxa--buida {
  visibility: hidden;
}

.ev-blocs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 12px 18px;
  overflow: auto;
}

.ev-bloc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 200px;
  padding: 9px 10px 10px;
  border: 1px solid var(--ev-border-2);
  border-radius: 6px;
  background: var(--ev-surface-2);
}
.ev-bloc.ev-bloc--n1 {
  border-color: var(--ev-border);
  border-radius: 7px;
  padding: 12px 14px 14px;
  background: var(--ev-surface);
}
.ev-bloc.ev-bloc--n2 {
  background: var(--ev-surface);
}

.ev-bloc-cap {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

.ev-bloc-nom {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.ev-bloc--n1 .ev-bloc-nom {
  font-size: 16px;
  font-weight: 700;
}

.ev-bloc--n2 .ev-bloc-nom {
  font-size: 14px;
}

.ev-bloc-num {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--ev-fg-3);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ev-bloc-cos {
  display: flex;
  gap: 7px;
}
.ev-bloc-cos.ev-bloc-cos--fila {
  flex-flow: row wrap;
  align-items: stretch;
}
.ev-bloc-cos.ev-bloc-cos--fila > .ev-bloc {
  flex: var(--ev-pes, 1) 1 260px;
}
.ev-bloc-cos.ev-bloc-cos--columna {
  flex-direction: column;
}

.ev-fitxa {
  flex: 0 0 auto;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 9px;
  border: 1px solid var(--ev-border-2);
  border-radius: 11px;
  background: color-mix(in oklab, var(--ev-color, var(--ev-surface)) 14%, var(--ev-surface));
  color: var(--ev-fg);
  font-size: 11.5px;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 3px 0 0 var(--ev-marca, transparent);
}
.ev-fitxa:hover {
  border-color: var(--ev-fg-3);
}

.ev-estat-marca {
  --ev-marca: var(--ev-cap);
}
.ev-estat-marca.ev-estat-marca--ocupat {
  --ev-marca: var(--ev-ocupat);
}
.ev-estat-marca.ev-estat-marca--buit {
  --ev-marca: var(--ev-buit);
}
.ev-estat-marca.ev-estat-marca--baixa {
  --ev-marca: var(--ev-baixa);
}

.ev-llegenda-estats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding-top: 4px;
}

.ev-llegenda-estat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ev-fg-3);
  font-size: 11.5px;
}

.ev-mostra {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--ev-cap);
}
.ev-mostra.ev-mostra--ocupat {
  background: var(--ev-ocupat);
}
.ev-mostra.ev-mostra--buit {
  background: var(--ev-buit);
}
.ev-mostra.ev-mostra--baixa {
  background: var(--ev-baixa);
}

@media (max-width: 900px) {
  .ev-app {
    --ev-alt: none;
  }
  .ev-cos {
    flex-direction: column;
  }
  .ev-calaix {
    flex: 0 0 auto;
    border-left: 0;
    border-top: 1px solid var(--ev-border);
  }
  .ev-app--amb-calaix .ev-valor,
  .ev-valor {
    width: 60px;
  }
  .ev-barra,
  .ev-sub,
  .ev-xip--cap {
    display: none;
  }
  .ev-nom {
    min-width: 80px;
  }
  .ev-cols {
    height: 65vh;
  }
}

button.tipus-etiqueta.incidencia-estat-canvi,
button.tipus-etiqueta.incidencia-prioritat-canvi {
  border: 0;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
}
button.tipus-etiqueta.incidencia-estat-canvi:hover,
button.tipus-etiqueta.incidencia-prioritat-canvi:hover {
  filter: brightness(1.1);
}
button.tipus-etiqueta.incidencia-estat-canvi:focus-visible, button.tipus-etiqueta.incidencia-estat-canvi[aria-expanded=true],
button.tipus-etiqueta.incidencia-prioritat-canvi:focus-visible,
button.tipus-etiqueta.incidencia-prioritat-canvi[aria-expanded=true] {
  outline: 2px solid var(--color-text);
  outline-offset: 1px;
}

button.incidencia-prioritat-punt,
span.incidencia-prioritat-punt {
  flex: none;
  display: inline-block;
  align-self: center;
  width: 0.8em;
  height: 0.8em;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
}

button.incidencia-prioritat-punt {
  cursor: pointer;
}
button.incidencia-prioritat-punt:hover {
  filter: brightness(1.1);
}
button.incidencia-prioritat-punt:focus-visible, button.incidencia-prioritat-punt[aria-expanded=true] {
  outline: 2px solid var(--color-text);
  outline-offset: 1px;
}

.card-foto-2.incidencia-grup .subtitol {
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4em;
  white-space: nowrap;
}
.card-foto-2.incidencia-grup .subtitol > * {
  flex: 0 1 auto;
  min-width: 0;
}
.card-foto-2.incidencia-grup .subtitol > label.tipus-etiqueta,
.card-foto-2.incidencia-grup .subtitol > button.tipus-etiqueta {
  margin: 0;
}
.card-foto-2.incidencia-grup .subtitol > .incidencia-tecnic {
  flex: 0 2 auto;
  min-width: 2.5em;
}
.card-foto-2.incidencia-grup .subtitol .incidencia-data-limit {
  flex: none;
}
.card-foto-2.incidencia-grup .subtitol .incidencia-darrer-missatge {
  flex: 1 1 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  color: var(--color-text-2);
}
.card-foto-2.incidencia-grup .subtitol .incidencia-darrer-missatge i {
  margin-right: 0.25em;
}
.card-foto-2.incidencia-grup .subtitol .incidencia-estat {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.35em;
}
.card-foto-2.incidencia-grup .subtitol .incidencia-estat .incidencia-estat-etiqueta {
  flex: 0 1 auto;
  min-width: 3em;
  max-width: 12em;
  margin: 0;
}
.card-foto-2.incidencia-grup .subtitol .incidencia-estat > i {
  flex: none;
}

.incidencia-missatge-tip {
  max-height: min(16em, 50vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: left;
}
.incidencia-missatge-tip .incidencia-missatge-tip-cap {
  margin-bottom: 0.3em;
  font-weight: 600;
}
.incidencia-missatge-tip .incidencia-missatge-tip-cos {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.incidencia-estat-menu {
  position: fixed;
  z-index: 10000;
  min-width: 12rem;
  max-width: calc(100vw - 16px);
  max-height: min(60vh, 26rem);
  overflow-y: auto;
  padding: 4px;
  background: var(--color-editable);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
  font-size: 1rem;
}
.incidencia-estat-menu button {
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: 100%;
  padding: 0.45em 0.6em;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.incidencia-estat-menu button:hover, .incidencia-estat-menu button:focus-visible {
  background: var(--color-hover);
  outline: none;
}
.incidencia-estat-menu button[aria-checked=true] {
  font-weight: 600;
}
.incidencia-estat-menu button:disabled {
  cursor: progress;
  opacity: 0.6;
}
.incidencia-estat-menu .punt {
  flex: none;
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
}
.incidencia-estat-menu .marca {
  margin-left: auto;
  padding-left: 0.5em;
}

button.tasques-rapides-boto {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.tasques-rapides-menu {
  position: fixed;
  inset: auto;
  margin: 0;
  min-width: 14rem;
  max-width: calc(100vw - 16px);
  max-height: min(60vh, 26rem);
  overflow-y: auto;
  padding: 4px;
  background: var(--color-editable);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
  font-size: 1rem;
}
.tasques-rapides-menu .tasques-rapides-item {
  display: flex;
  align-items: center;
}
.tasques-rapides-menu .tasques-rapides-nova {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--color-border);
}
.tasques-rapides-menu button {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.45em 0.6em;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tasques-rapides-menu button:first-child {
  flex: 1;
}
.tasques-rapides-menu button:hover, .tasques-rapides-menu button:focus-visible {
  background: var(--color-hover);
  outline: none;
}
.tasques-rapides-menu .tasques-rapides-buit {
  margin: 0;
  padding: 0.45em 0.6em;
  opacity: 0.7;
}

.dies-lliures {
  --dl-absencia: var(--color1);
  --dl-festiu: var(--color-avis);
  --dl-intensiu: var(--color-correcte);
  container: dies-lliures/size;
  display: flex;
  flex-flow: column;
  gap: 0.5rem;
  min-height: 0;
  padding: 0.25rem 0.1rem 0.5rem;
}
:root.dark .dies-lliures {
  --dl-absencia: color-mix(in srgb, var(--color1) 60%, var(--color-text));
}
.dies-lliures .dl-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 12px;
  color: var(--color-text);
}
.dies-lliures .dl-periode {
  flex: 1;
  text-align: center;
  font-weight: 600;
  text-transform: capitalize;
}
.dies-lliures .dl-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 0.5em;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-editable);
  color: var(--color-text);
  font-size: 11px;
  cursor: pointer;
}
.dies-lliures .dl-nav-btn:hover:not(:disabled) {
  background: var(--color-hover);
}
.dies-lliures .dl-nav-btn:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 1px;
}
.dies-lliures .dl-nav-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.dies-lliures .dies-lliures-mesos {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 0.9rem;
}
.dies-lliures .dl-mes {
  display: flex;
  flex-flow: column;
  min-width: 0;
  min-height: 0;
}
.dies-lliures .dl-mes h2 {
  margin: 0 0 0.2rem;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-text);
}
.dies-lliures .dl-graella {
  container-type: size;
  flex: 1 1 0;
  min-height: 0;
  max-height: 21em;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(7, minmax(0, 1fr));
  gap: 1px;
  text-align: center;
}
.dies-lliures .dl-graella > * {
  --dl-lletra: clamp(8px, min(100cqh / 7 * .65, 100cqw / 7 * .5), 14px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  font-size: var(--dl-lletra);
  line-height: 1.6;
}
.dies-lliures .dl-graella > .dl-setmana {
  font-size: calc(var(--dl-lletra) * 0.88);
  text-transform: uppercase;
  color: var(--color-text-2);
}
.dies-lliures .dl-dia {
  position: relative;
  border-radius: 4px;
  color: var(--color-text);
}
.dies-lliures .dl-dia.dl-capsetmana {
  color: var(--color-text-2);
  background: color-mix(in srgb, var(--color-fons-2) 60%, transparent);
}
.dies-lliures .dl-dia.dl-passat {
  opacity: 0.45;
}
.dies-lliures .dl-dia.dl-avui {
  outline: 2px solid var(--color-text);
  outline-offset: -2px;
  font-weight: 700;
}
.dies-lliures .dl-dia.dl-absencia {
  --dl-c: var(--dl-absencia);
}
.dies-lliures .dl-dia.dl-festiu {
  --dl-c: var(--dl-festiu);
}
.dies-lliures .dl-dia.dl-intensiu {
  --dl-c: var(--dl-intensiu);
}
.dies-lliures .dl-dia.dl-doble-intensiu {
  --dl-c2: var(--dl-intensiu);
}
.dies-lliures .dl-dia.dl-doble-absencia {
  --dl-c2: var(--dl-absencia);
}
.dies-lliures .dl-dia.dl-doble-festiu {
  --dl-c2: var(--dl-festiu);
}
.dies-lliures .dl-dia.dl-marcat {
  cursor: default;
  font-weight: 700;
  color: var(--color-text);
  background: color-mix(in srgb, var(--dl-c) 40%, var(--color-editable));
  box-shadow: inset 0 -3px 0 var(--dl-c);
}
.dies-lliures .dl-dia.dl-marcat:hover, .dies-lliures .dl-dia.dl-marcat:focus-visible {
  background: color-mix(in srgb, var(--dl-c) 60%, var(--color-editable));
}
.dies-lliures .dl-dia.dl-marcat:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 1px;
}
.dies-lliures .dl-dia.dl-doble::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-style: solid;
  border-width: 0 7px 7px 0;
  border-color: transparent var(--dl-c2) transparent transparent;
  border-top-right-radius: 4px;
}
.dies-lliures .dl-dia.dl-marcat.dl-pendent {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--dl-c) 40%, var(--color-editable)) 0 3px, var(--color-editable) 3px 6px);
  box-shadow: none;
  outline: 1px dashed var(--dl-c);
  outline-offset: -1px;
}
.dies-lliures .dl-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 30rem) {
  .dies-lliures {
    container-type: inline-size;
  }
}

@container dies-lliures (min-aspect-ratio: 8 / 5) {
  .dies-lliures .dies-lliures-mesos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
  }
}
@container dies-lliures (max-height: 200px) {
  .dies-lliures .dies-lliures-mesos {
    flex: none;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
    grid-template-rows: none;
  }
  .dies-lliures .dl-graella {
    container-type: normal;
    flex: none;
    max-height: none;
    grid-template-rows: none;
  }
  .dies-lliures .dl-graella > * {
    --dl-lletra: 11px;
  }
}
@media (max-width: 30rem) {
  .dies-lliures .dies-lliures-mesos {
    flex: none;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
    grid-template-rows: none;
  }
  .dies-lliures .dl-graella {
    container-type: normal;
    flex: none;
    max-height: none;
    grid-template-rows: none;
  }
  .dies-lliures .dl-graella > * {
    --dl-lletra: 11px;
  }
}
.dies-lliures.dl-anual {
  container-type: inline-size;
  padding: 0.5rem;
}
.dies-lliures.dl-anual .dies-lliures-mesos {
  flex: none;
  grid-template-columns: repeat(var(--dl-columnes, 1), minmax(0, 1fr));
  grid-template-rows: none;
  gap: 1rem 1.5rem;
}
.dies-lliures.dl-anual .dl-mes h2 {
  font-size: 13px;
}
.dies-lliures.dl-anual .dl-graella {
  container-type: normal;
  flex: none;
  max-height: none;
  grid-template-rows: none;
}
.dies-lliures.dl-anual .dl-graella > * {
  --dl-lletra: 12px;
}
.dies-lliures.dl-anual .dl-llegenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--color-text);
}
.dies-lliures.dl-anual .dl-llegenda li {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.dies-lliures.dl-anual .dl-mostra {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  border-radius: 3px;
}
.dies-lliures.dl-anual .dl-mostra.dl-festiu {
  background: color-mix(in srgb, var(--dl-festiu) 40%, var(--color-editable));
  box-shadow: inset 0 -3px 0 var(--dl-festiu);
}
.dies-lliures.dl-anual .dl-mostra.dl-intensiu {
  background: color-mix(in srgb, var(--dl-intensiu) 40%, var(--color-editable));
  box-shadow: inset 0 -3px 0 var(--dl-intensiu);
}
.dies-lliures.dl-anual .dl-mostra.dl-capsetmana {
  background: color-mix(in srgb, var(--color-fons-2) 60%, transparent);
  outline: 1px solid var(--color-border);
  outline-offset: -1px;
}

@container dies-lliures (min-width: 28rem) {
  .dies-lliures.dl-anual .dies-lliures-mesos {
    --dl-columnes: 2;
  }
}
@container dies-lliures (min-width: 42rem) {
  .dies-lliures.dl-anual .dies-lliures-mesos {
    --dl-columnes: 3;
  }
}
@container dies-lliures (min-width: 56rem) {
  .dies-lliures.dl-anual .dies-lliures-mesos {
    --dl-columnes: 4;
  }
}
@container dies-lliures (min-width: 90rem) {
  .dies-lliures.dl-anual .dies-lliures-mesos {
    --dl-columnes: 6;
  }
}
.dl-vista {
  opacity: 0;
  transition: opacity 0.15s;
  cursor: pointer;
}
[data-id-widget]:hover .dl-vista, .dl-vista:focus-visible {
  opacity: 1;
}
@media (hover: none) {
  .dl-vista {
    opacity: 1;
  }
}

.dl-llista .dl-num-dies {
  margin-left: 0.35em;
  font-size: smaller;
  color: var(--color-text-2);
  white-space: nowrap;
}

.midaImatgeTipusDoc {
  display: block;
  font-size: 0.85em;
  color: var(--color-text-2);
}

label:has(> .colorCss) {
  grid-column: 1/-1;
}

.duradaHmAjuda {
  margin-left: 0.4em;
  font-size: 0.85em;
  opacity: 0.75;
  white-space: nowrap;
}

.colorCss {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}
.colorCss .colorCssMostra {
  flex: none;
  width: 2.5em;
  height: 1.25em;
  border: 1px solid var(--color-border);
  border-radius: 3px;
}

.cercaVistes {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-right: 0.5rem;
  vertical-align: middle;
}
.cercaVistes .cercaVista {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background-color: var(--color-editable);
  color: var(--color-text-2);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
  cursor: pointer;
}
.cercaVistes .cercaVista i {
  font-size: 0.95em;
}
.cercaVistes .cercaVista:hover {
  background-color: var(--color-hover);
  color: var(--color-text);
}
.cercaVistes .cercaVista:focus-visible {
  outline: 2px solid var(--apl-primary);
  outline-offset: 1px;
}
.cercaVistes .cercaVista.actiu {
  background-color: var(--apl-primary);
  border-color: var(--apl-primary);
  color: var(--color-clar-1);
}

@media (max-width: 800px) {
  .cercaVistes .cercaVista {
    padding: 0.25rem 0.45rem;
  }
  .cercaVistes .cercaVista span {
    display: none;
  }
}

.apartat .titolApartat .titolApartatFiltres > .btnsCercaInterior {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.3rem;
}
.apartat .titolApartat .titolApartatFiltres > .btnsCercaInterior > span[id^=selField] .ts-wrapper {
  min-width: 14em;
}

.apartat .titolApartat.titolResultats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
}
.apartat .titolApartat.titolResultats > label {
  margin: 0;
}

.of-fitxes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  align-items: start;
  gap: 1rem;
  padding: 0.5rem 0;
}

.of-fitxa {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background-color: var(--color-fons);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.of-fitxa:hover {
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.3);
}
.of-fitxa:focus-visible {
  outline: 2px solid var(--apl-primary);
  outline-offset: 2px;
}

.of-fitxa-img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.of-fitxa-sense {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-fons-2);
  color: var(--color-text-2);
  font-size: 2.5rem;
}

.of-fitxa-cos {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px 14px;
}

.of-fitxa-cap {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.of-fitxa-titol {
  flex: 1;
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: pretty;
}

.of-fitxa-meta {
  flex-shrink: 0;
  padding-top: 3px;
  color: var(--color-text-2);
  font-size: 0.75rem;
}

.of-fitxa-sub {
  color: var(--color-text-2);
  font-size: 0.875rem;
  line-height: 1.35;
}

.of-fitxa-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 4px;
}

.of-pindola {
  padding: 3px 9px;
  border-radius: 20px;
  background-color: color-mix(in srgb, var(--of-color, var(--apl-primary)) 22%, transparent);
  color: var(--color-text);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}
.of-pindola.of-neutral {
  background-color: var(--color-fons-2);
  color: var(--color-text-2);
}

.of-fitxes-buit {
  grid-column: 1/-1;
  padding: 2rem;
  color: var(--color-text-2);
  text-align: center;
}

.oferta-imatge .oi-cos {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 28rem;
}
.oferta-imatge .oi-img {
  display: block;
  width: 100%;
  aspect-ratio: 1400/788;
  border-radius: 12px;
  object-fit: cover;
}
.oferta-imatge .oi-buida {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background-color: var(--color-fons-2);
  color: var(--color-text-2);
}
.oferta-imatge .oi-buida i {
  font-size: 2rem;
}
.oferta-imatge .oi-ajuda {
  margin: 0;
  color: var(--color-text-2);
  font-size: 0.8rem;
}
.oferta-imatge .oi-botons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.oferta-imatge .oi-boto {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background-color: var(--color-editable);
  color: var(--color-text-2);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.oferta-imatge .oi-boto:hover {
  background-color: var(--color-hover);
  color: var(--color-text);
}

#content > div.menu.menu-flotant {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 990;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
#content > div.menu.menu-flotant ul.menu > li:focus-within > ul {
  opacity: 1;
  max-height: 80vh;
  overflow-y: auto;
  display: block;
}

body.menuEsqCollapsed .menuEsq[data-ambicones] {
  transition: width var(--menuEsq-dur) var(--menuEsq-ease), margin-right var(--menuEsq-dur) var(--menuEsq-ease), box-shadow var(--menuEsq-dur) var(--menuEsq-ease);
}
body.menuEsqCollapsed .menuEsq[data-ambicones].menuEsqFlotant {
  width: var(--menuEsq-w);
  margin-right: calc(var(--menuEsq-w-collapsed) - var(--menuEsq-w));
  z-index: 950;
  box-shadow: 4px 0 18px rgba(0, 0, 0, 0.18);
}
body.menuEsqCollapsed .menuEsq[data-ambicones].menuEsqFlotant .menuEsqHead {
  justify-content: flex-start;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}
body.menuEsqCollapsed .menuEsq[data-ambicones].menuEsqFlotant .menuEsqItems {
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}
body.menuEsqCollapsed .menuEsq[data-ambicones].menuEsqFlotant .menuEsqSearch {
  display: flex;
}
body.menuEsqCollapsed .menuEsq[data-ambicones].menuEsqFlotant a.menuEsqItem {
  justify-content: flex-start;
  gap: 0.7rem;
  padding: 0.5rem 0.6rem;
}
body.menuEsqCollapsed .menuEsq[data-ambicones].menuEsqFlotant a.menuEsqItem i {
  width: 1.1rem;
  font-size: 0.95em;
}
body.menuEsqCollapsed .menuEsq[data-ambicones].menuEsqFlotant a.menuEsqItem .menuEsqText,
body.menuEsqCollapsed .menuEsq[data-ambicones].menuEsqFlotant a.menuEsqItem .ct {
  display: inline;
}
body.menuEsqCollapsed .menuEsq[data-ambicones].menuEsqFlotant a.menuEsqItem.on::before {
  left: -0.6rem;
}
body.menuEsqCollapsed .menuEsq[data-ambicones].menuEsqFlotant .grp {
  height: auto;
  padding: 0.9rem 0.6rem 0.35rem;
  margin: 0;
  font-size: 0.82em;
  color: var(--color-text-2);
  background-color: transparent;
}

.cfg-pagina {
  --cfg-accent: var(--accent);
  --cfg-accent-text: color-mix(in srgb, var(--brand) 62%, #000);
  --cfg-accent-soft: var(--accent-soft);
  --cfg-accent-vora: color-mix(in srgb, var(--brand) 40%, var(--surface));
  --cfg-primari: color-mix(in srgb, var(--brand) 62%, #000);
  --cfg-primari-text: #fff;
  --cfg-toggle-off: var(--border-strong);
}

html.dark .cfg-pagina {
  color-scheme: dark;
  --cfg-accent-text: color-mix(in srgb, var(--accent) 45%, var(--fg));
  --cfg-accent-vora: color-mix(in srgb, var(--brand) 45%, var(--fg-muted));
  --cfg-accent: color-mix(in srgb, var(--accent) 70%, var(--fg));
  --cfg-primari: var(--cfg-accent);
  --cfg-primari-text: var(--accent-fg);
}

html.dark .cfg-pagina .cfg-fila > input[type=checkbox]:checked::after,
html.dark .cfg-pagina .cfg-func__cap > input[type=checkbox]:checked::after {
  background: var(--cfg-primari-text);
}

html.dark .cfg-pagina .menuEsq[data-ambicones] .menuEsqItem.on,
html.dark .cfg-pagina .menuEsq[data-ambicones] .menuEsqItem.on i {
  color: var(--fg);
}

html.dark .cfg-pagina .menuEsq[data-ambicones] .menuEsqItem.on::before {
  background-color: var(--cfg-primari);
}

.cfg-pagina #dades {
  display: block;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
}

.cfg-pagina #menuTorna {
  display: none;
}

.cfg-pagina .cfg-amagada,
.cfg-pagina .cfg-filtrada-cerca,
.cfg-pagina .cfg-filtrada-xip {
  display: none !important;
}

.cfg-cap {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.cfg-cap__fila,
.cfg-pestanyes {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

.cfg-cap__fila {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 18px;
}

.cfg-cap h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.cfg-cap__accions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cfg-estat,
.cfg-cap [data-cfg-descarta] {
  display: none;
}

.cfg-brut .cfg-estat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--pending-fg);
}

.cfg-brut .cfg-cap [data-cfg-descarta] {
  display: inline-flex;
}

.cfg-estat::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pending);
}

.cfg-desat {
  font-size: 13px;
  color: var(--cfg-accent-text);
}

.cfg-error {
  font-size: 13px;
  font-weight: 600;
  color: var(--danger-fg, var(--danger));
}

.cfg-error[hidden] {
  display: none;
}

.cfg-pestanyes {
  display: flex;
  gap: 22px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.cfg-pestanyes a {
  flex: none;
  padding: 8px 0 10px;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-muted);
  text-decoration: none;
}

.cfg-pestanyes a:hover {
  color: var(--fg);
}

.cfg-pestanyes a.on {
  color: var(--fg);
  border-bottom-color: var(--cfg-accent);
}

.cfg-boto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.cfg-boto:hover {
  background: var(--surface-2);
  color: var(--fg);
}

.cfg-cap .cfg-boto {
  height: 34px;
  padding: 0 14px;
  font-size: 14px;
}

.cfg-pagina .cfg-boto--primari {
  padding: 0 18px;
  border-color: transparent;
  background: var(--cfg-primari);
  color: var(--cfg-primari-text);
  font-weight: 600;
}

.cfg-pagina .cfg-boto--primari:hover {
  background: color-mix(in srgb, var(--cfg-primari) 88%, #000);
  color: var(--cfg-primari-text);
}

.cfg-pagina .cfg-boto--primari:disabled {
  opacity: .45;
  cursor: default;
}

.cfg-afegeix {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--cfg-accent-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.cfg-afegeix:hover {
  background: var(--cfg-accent-soft);
}

.cfg-contingut {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 32px 80px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.cfg-pagina .cfg-contingut > .apartat {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  scroll-margin-top: 120px;
}

.cfg-pagina .cfg-contingut > .apartat::after {
  display: none;
}

.cfg-pagina .cfg-contingut > .apartat > .titolApartat {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
}

.cfg-titol h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
}

.cfg-pagina .apartat .titolApartat .cfg-titol,
.cfg-pagina .apartat .titolApartat .cfg-titol * {
  white-space: normal;
}

.cfg-titol p {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--fg-muted);
}

.cfg-pagina .cfg-contingut > .apartat > .titolApartat .titolApartatFiltres {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
}

.cfg-pagina input.cfg-cerca {
  width: 220px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--fg);
  font-size: 13px;
}

.cfg-pagina .cfg-contingut > .apartat > .titolApartat .titolApartatFiltres select {
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--fg);
  font-size: 13px;
}

.cfg-pagina input.cfg-cerca:focus {
  outline: none;
  border-color: var(--cfg-accent);
}

.cfg-funcionalitats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.cfg-func {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.cfg-func:has(input:checked) {
  border-color: var(--cfg-accent-vora);
}

.cfg-func__cap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  cursor: pointer;
}

.cfg-func__icona {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--fg-faint);
  font-size: 15px;
}

.cfg-func:has(input:checked) .cfg-func__icona {
  background: var(--cfg-accent-soft);
  color: var(--cfg-accent-text);
}

.cfg-func__nom {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
}

.cfg-func__desc {
  flex: 1;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg-muted);
}

.cfg-func__peu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 13px;
  font-weight: 600;
}

.cfg-func__etiqueta {
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--pending-soft);
  color: var(--pending-fg);
  font-size: 12px;
  font-weight: 600;
}

.cfg-func__peu a {
  color: var(--cfg-accent-text);
  text-decoration: none;
}

.cfg-func__pendent {
  font-weight: 400;
  color: var(--fg-faint);
}

.cfg-pagina .cfg-fila > input[type="checkbox"],
.cfg-pagina .cfg-func__cap > input[type="checkbox"] {
  appearance: none;
  position: relative;
  flex: none;
  width: 38px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: var(--cfg-toggle-off);
  cursor: pointer;
  transition: background .15s;
}

.cfg-pagina .cfg-fila > input[type="checkbox"]::after,
.cfg-pagina .cfg-func__cap > input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  transition: left .15s;
}

.cfg-pagina .cfg-fila > input[type="checkbox"]:checked,
.cfg-pagina .cfg-func__cap > input[type="checkbox"]:checked {
  background: var(--cfg-accent);
}

.cfg-pagina .cfg-fila > input[type="checkbox"]:checked::after,
.cfg-pagina .cfg-func__cap > input[type="checkbox"]:checked::after {
  left: 19px;
}

.cfg-pagina .cfg-fila > input[type="checkbox"]:disabled,
.cfg-pagina .cfg-func__cap > input[type="checkbox"]:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.cfg-pagina .cfg-fila > input[type="checkbox"]:focus-visible,
.cfg-pagina .cfg-func__cap > input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--cfg-accent);
  outline-offset: 2px;
}

.cfg-opcions {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.cfg-grup {
  scroll-margin-top: 120px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px 32px;
  padding: 22px 24px;
}

.cfg-grup + .cfg-grup,
.cfg-grup + div > .cfg-grup:first-child {
  border-top: 1px solid var(--border-soft);
}

.cfg-grup__cap h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
}

.cfg-grup__cap p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--fg-muted);
}

.cfg-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--fg);
}

.cfg-fila[hidden] {
  display: none;
}

.cfg-fila + .cfg-fila {
  border-top: 1px solid var(--border-soft);
}

.cfg-fila:first-child {
  padding-top: 0;
}

label.cfg-fila {
  cursor: pointer;
}

.cfg-fila__text {
  flex: 1 1 220px;
  margin: 0;
  font-weight: 400;
}

.cfg-fila__text small {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--fg-muted);
}

.cfg-fila__control {
  position: relative;
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.cfg-fila--bloc .cfg-fila__control {
  flex: 1 1 100%;
}

.cfg-fila__control--botons {
  flex-wrap: wrap;
}

.cfg-pagina .cfg-fila input[type="text"],
.cfg-pagina .cfg-fila input[type="email"],
.cfg-pagina .cfg-fila input[type="url"],
.cfg-pagina .cfg-fila input[type="number"],
.cfg-pagina .cfg-fila textarea,
.cfg-pagina .cfg-fila select,
.cfg-pagina .cfg-fila .ts-wrapper {
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--surface);
  color: var(--fg);
  font-size: 14px;
}

.cfg-pagina .cfg-fila input[type="text"],
.cfg-pagina .cfg-fila input[type="email"],
.cfg-pagina .cfg-fila input[type="url"],
.cfg-pagina .cfg-fila textarea {
  width: 320px;
  max-width: 100%;
}

.cfg-pagina .cfg-fila textarea {
  padding-top: 6px;
  resize: vertical;
}

.cfg-pagina .cfg-fila--bloc textarea,
.cfg-pagina .cfg-fila--bloc input[type=text] {
  width: 100%;
}

.cfg-pagina .cfg-fila textarea[rows]:not([rows="1"]) {
  height: auto;
  width: 100%;
}

.cfg-pagina .cfg-fila input[type="number"] {
  width: 80px;
}

.cfg-pagina .cfg-fila input[type=color] {
  width: 2.5em;
  height: 1.75em;
  border-radius: 6px;
  cursor: pointer;
}

.cfg-pagina .cfg-fila .ts-wrapper.multi {
  height: auto;
  width: 100%;
  padding-top: 3px;
  padding-bottom: 3px;
}

.cfg-pagina .cfg-fila .ts-wrapper.multi .ts-control > .item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 2px 4px 2px 0;
  padding: 1px 4px 1px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--fg);
  font-size: 13px;
}

.cfg-pagina .cfg-fila .ts-wrapper.multi .ts-control > .item[data-value^="casella:"] {
  border-color: var(--cfg-accent-vora);
  background: var(--cfg-accent-soft);
  color: var(--cfg-accent-text);
}

.cfg-pagina .cfg-fila .ts-wrapper.multi .ts-control > .item .remove {
  border: 0;
  padding: 0 4px;
  color: inherit;
  opacity: .6;
}

.cfg-unitat {
  font-size: 13px;
  color: var(--fg-muted);
}

.cfg-pagina .cfg-amb-unitat {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding-right: 10px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--surface);
  cursor: text;
}

.cfg-pagina .cfg-amb-unitat:focus-within {
  border-color: var(--cfg-accent);
}

.cfg-pagina .cfg-fila .cfg-amb-unitat input {
  height: 30px;
  min-height: 0;
  padding-right: 4px;
  border: 0;
  background: transparent;
  text-align: right;
}

.cfg-pagina .cfg-fila .cfg-amb-unitat input:focus {
  box-shadow: none;
}

.cfg-pagina .cfg-amb-unitat:has(input:disabled),
.cfg-pagina .cfg-amb-unitat:has(input[readonly]) {
  background: var(--surface-2);
  cursor: default;
}

.cfg-pagina .cfg-amb-unitat .cfg-unitat {
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.cfg-pagina .cfg-fila input,
.cfg-pagina .cfg-fila textarea {
  caret-color: var(--fg);
}

.cfg-pagina .cfg-fila select,
.cfg-pagina .cfg-fila .ts-wrapper {
  min-width: min(220px, 100%);
  max-width: 100%;
}

.cfg-pagina .cfg-fila .ts-wrapper {
  display: flex;
  align-items: center;
}

.cfg-pagina .cfg-fila__control > .ts-wrapper.full:not(.multi) {
  flex: 0 1 220px;
  width: 220px;
}

.cfg-pagina .cfg-fila__control > .cfg-boto {
  flex: none;
}

.cfg-pagina .cfg-fila input:focus,
.cfg-pagina .cfg-fila select:focus,
.cfg-pagina .cfg-fila .ts-wrapper.focus {
  outline: none;
  border-color: var(--cfg-accent);
}

.cfg-fila:has(> .cfg-fila__control + input[type="checkbox"]) {
  flex-wrap: nowrap;
}

.cfg-fila:has(> .cfg-fila__control + input[type="checkbox"]) > .cfg-fila__text {
  flex-basis: 120px;
}

.cfg-pagina .cfg-fila:has(> .cfg-fila__control + input[type="checkbox"]) .ts-wrapper,
.cfg-pagina .cfg-fila:has(> .cfg-fila__control + input[type="checkbox"]) select {
  min-width: 160px;
}

.cfg-grup--ample {
  grid-template-columns: 1fr;
}

.cfg-grup--ample .cfg-grup__files {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  column-gap: 32px;
}

.cfg-grup--ample .cfg-fila {
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}

.cfg-grup--ample .cfg-fila--bloc {
  grid-column: 1 / -1;
}

.cfg-inactiu {
  opacity: .45;
}

.cfg-taula {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.cfg-pagina .cfg-taula .table-div {
  width: 100%;
  margin: 0;
  font-size: 14px;
}

.cfg-taula--ample .table-div {
  min-width: 880px;
}

.cfg-taula--mitjana .table-div {
  min-width: 640px;
}

.cfg-pagina .cfg-taula .table-div > :first-child > div {
  padding: 9px 6px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

.cfg-pagina .cfg-taula .table-div > :first-child > div[title] {
  cursor: help;
}

.cfg-pagina .cfg-taula .table-div > form,
.cfg-pagina .cfg-taula .table-div > div:not(:first-child) {
  border: 0;
}

.cfg-pagina .cfg-taula .table-div > form > div,
.cfg-pagina .cfg-taula .table-div > div:not(:first-child) > div {
  padding: 6px;
  border: 0;
  border-top: 1px solid var(--border-soft);
  line-height: 1.4;
  vertical-align: middle;
}

.cfg-pagina .cfg-taula .table-div > :first-child + form > div,
.cfg-pagina .cfg-taula .table-div > :first-child + div > div {
  border-top: 0;
}

.cfg-pagina .cfg-taula .table-div > :first-child > div:first-child,
.cfg-pagina .cfg-taula .table-div > form > div:first-child,
.cfg-pagina .cfg-taula .table-div > div:not(:first-child) > div:first-child {
  padding-left: 12px;
}

.cfg-pagina .cfg-taula .table-div > form:hover,
.cfg-pagina .cfg-taula .table-div > div:not(:first-child):hover {
  background: color-mix(in srgb, var(--surface-2) 50%, var(--surface));
}

.cfg-pagina .cfg-taula .table-div > form.cfg-nova {
  background: color-mix(in srgb, var(--cfg-accent-soft) 45%, var(--surface));
}

.cfg-pagina .cfg-taula .table-div input[type="text"],
.cfg-pagina .cfg-taula .table-div input[type="number"],
.cfg-pagina .cfg-taula .table-div textarea,
.cfg-pagina .cfg-taula .table-div select,
.cfg-pagina .cfg-taula .table-div .ts-wrapper {
  min-width: 9em;
}

.cfg-pagina .cfg-taula .table-div .ts-wrapper {
  width: 100%;
  min-width: 0;
  height: 30px;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--fg);
  font-size: 14px;
  line-height: 28px;
  box-shadow: none;
}

.cfg-pagina .cfg-taula .table-div select:has(option[value=""]:checked) {
  color: var(--fg-faint);
}

.cfg-pagina .cfg-taula .table-div textarea {
  padding-top: 0;
  resize: none;
}

.cfg-pagina .cfg-taula .table-div .ts-wrapper {
  display: flex;
  align-items: center;
}

.cfg-pagina .cfg-taula .table-div input[name="nom"],
.cfg-pagina .cfg-taula .table-div input[name="sigles"] {
  font-weight: 600;
}

.cfg-pagina .cfg-taula .table-div input[type="text"]:hover,
.cfg-pagina .cfg-taula .table-div textarea:hover,
.cfg-pagina .cfg-taula .table-div select:hover,
.cfg-pagina .cfg-taula .table-div .ts-wrapper:hover {
  border-color: var(--border);
}

.cfg-pagina .cfg-taula .table-div input:focus,
.cfg-pagina .cfg-taula .table-div textarea:focus,
.cfg-pagina .cfg-taula .table-div select:focus,
.cfg-pagina .cfg-taula .table-div .ts-wrapper.focus {
  outline: none;
  border-color: var(--cfg-accent);
  background: var(--surface);
}

.cfg-pagina .cfg-taula .table-div input::placeholder,
.cfg-pagina .cfg-taula .table-div textarea::placeholder {
  color: var(--fg-faint);
}

.cfg-pagina .cfg-taula .table-div input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--cfg-accent);
  cursor: pointer;
}

.cfg-pagina .cfg-taula .drag-child {
  color: var(--fg-faint);
  cursor: grab;
}

.cfg-pagina .cfg-taula .fa-trash {
  color: var(--danger-fg);
  cursor: pointer;
}

.cfg-taula__peu {
  padding: 6px 8px;
  border-top: 1px solid var(--border-soft);
}

.cfg-xips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}

.cfg-xip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.cfg-xip span {
  font-weight: 400;
  color: var(--fg-muted);
}

.cfg-xip.on {
  border-color: var(--fg);
  background: var(--fg);
  color: var(--bg);
}

.cfg-xip.on span {
  color: color-mix(in srgb, var(--bg) 75%, var(--fg));
}

.cfg-buit {
  padding: 32px 16px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  text-align: center;
}

.cfg-buit h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
}

.cfg-buit p {
  margin: 6px 0 14px;
  font-size: 13px;
  color: var(--fg-muted);
}

.cfg-buit .cfg-afegeix {
  border: 1px solid var(--border-strong);
  background: var(--surface);
}

.cfg-parells {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.cfg-parells__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 36px;
  align-items: center;
  padding: 4px 6px;
  border-top: 1px solid var(--border-soft);
}

.cfg-parells__fila--cap {
  border-top: 0;
  background: var(--surface-2);
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cfg-parells__fila--cap span {
  padding: 4px 8px;
}

.cfg-parells__fila > i {
  text-align: center;
  color: var(--fg-faint);
}

.cfg-pagina .cfg-parells input[type="text"] {
  width: 100%;
  height: 30px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}

.cfg-pagina .cfg-parells input[type="text"]:hover {
  border-color: var(--border);
}

.cfg-pagina .cfg-parells input[type="text"]:focus {
  border-color: var(--cfg-accent);
  background: var(--surface);
}

.cfg-elimina {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--fg-faint);
  font-size: 16px;
  cursor: pointer;
}

.cfg-elimina:hover {
  background: var(--danger-soft);
  color: var(--danger-fg);
}

.cfg-parells__peu {
  padding: 4px 6px;
  border-top: 1px solid var(--border-soft);
}

.cfg-avis {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--color-avis) 60%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-avis) 18%, var(--surface));
  color: var(--color-avis-text);
  font-size: 13px;
}

.cfg-pagina .psg-via-grup > label.cfg-fila {
  align-self: start;
}

.cfg-pagina .psg-via-config {
  margin-left: 0;
}

@media (max-width: 700px) {
  .cfg-cap__fila,
  .cfg-pestanyes {
    padding-left: 16px;
    padding-right: 16px;
  }

  .cfg-contingut {
    padding: 20px 16px 64px;
  }

  .cfg-pagina input.cfg-cerca {
    width: 100%;
  }
  .cfg-fila__control {
    flex-wrap: wrap;
  }
  .cfg-fila:has(> .cfg-fila__control + input[type=checkbox]) {
    flex-wrap: wrap;
  }
  .cfg-fila:has(> .cfg-fila__control + input[type=checkbox]) > .cfg-fila__text {
    flex-basis: 100%;
  }
  .cfg-fila:has(> .cfg-fila__control + input[type=checkbox]) > .cfg-fila__control {
    flex: 1 1 auto;
    flex-wrap: wrap;
  }
}

.llegendaTresEstats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin: 0 0 8px;
  padding: 6px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--color1) 8%, transparent);
  color: var(--color-text);
  font-size: 12px;
  line-height: 1.4;
}

.llegendaTresEstats-mostres {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.llegendaTresEstats-estat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.llegendaTresEstats-estat input {
  pointer-events: none;
}

.avis-tancable {
  position: relative;
  padding-right: 28px;
}
.avis-tancable-tanca {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  padding: 2px 6px;
  border: 0;
  background: none;
  color: var(--color-text);
  cursor: pointer;
  opacity: 0.6;
}
.avis-tancable-tanca:hover, .avis-tancable-tanca:focus-visible {
  opacity: 1;
}

#estadistiquesGeneric .filtres {
  container-type: inline-size;
}
#estadistiquesGeneric .filtres .ts-wrapper.multi {
  max-width: min(50vw, 100cqw - 6em);
}
#estadistiquesGeneric .filtres > .llegendaTresEstats {
  margin: 8px 0 0;
}
#estadistiquesGeneric .filtres > div.dada.full[class*=filtre-] {
  padding: 6px 0;
}
#estadistiquesGeneric .filtres > div.dada.full[class*=filtre-] + div.dada.full[class*=filtre-] {
  border-top: 1px solid var(--color-fons-2);
}
#estadistiquesGeneric .filtres > div.dada.full[class*=filtre-] > .filtre-on {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
}
#estadistiquesGeneric .filtres > div.dada.full[class*=filtre-] > .filtre-on > label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#estadistiquesGeneric .filtres > div.dada.full[class*=filtre-] > .filtre-on > label:first-child {
  font-weight: 600;
}
#estadistiquesGeneric .filtres > div.dada.full[class*=filtre-] > .filtre-on i.fa-filter[data-show-hide-fields]::after {
  content: none;
}
#estadistiquesGeneric .filtres > div.dada.full[class*=filtre-] > div.full[class*="[on]"] {
  margin: 4px 0 4px 7px;
  padding-left: 13px;
  border-left: 2px solid var(--color-fons-2);
}

#estadistiquesGeneric .filtres > div.dada.full[class*=filtre-] > div.full[class*="[on]"] > div.dada,
.filtres-modal.inf-filtres-modal .filtres-modal__cos > div.full > div.dada {
  margin-bottom: 6px;
}
#estadistiquesGeneric .filtres > div.dada.full[class*=filtre-] > div.full[class*="[on]"] div.dada.flex-rw,
.filtres-modal.inf-filtres-modal .filtres-modal__cos > div.full div.dada.flex-rw {
  align-items: center;
  column-gap: 12px;
}
#estadistiquesGeneric .filtres > div.dada.full[class*=filtre-] > div.full[class*="[on]"] div.dada.flex, #estadistiquesGeneric .filtres > div.dada.full[class*=filtre-] > div.full[class*="[on]"] div.dada.flex-rw > div.dada,
.filtres-modal.inf-filtres-modal .filtres-modal__cos > div.full div.dada.flex,
.filtres-modal.inf-filtres-modal .filtres-modal__cos > div.full div.dada.flex-rw > div.dada {
  align-items: center;
}
#estadistiquesGeneric .filtres > div.dada.full[class*=filtre-] > div.full[class*="[on]"] .filtre-adv > .il > div,
.filtres-modal.inf-filtres-modal .filtres-modal__cos > div.full .filtre-adv > .il > div {
  border-bottom: 0;
}

.filtres-modal.inf-filtres-modal {
  display: contents;
}

.inf-filtres-modal input, .inf-filtres-modal .btnInput, .inf-filtres-modal select, .inf-filtres-modal textarea, .inf-filtres-modal .ts-wrapper {
  border: 1px solid var(--color-border);
}

.ef-commutador {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.25em 0.7em 0.25em 0.3em;
  border: 1px solid var(--color-fons-2);
  border-radius: 6px;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
.ef-commutador .ef-commutador-pista {
  position: relative;
  width: 2.2em;
  height: 1.2em;
  border-radius: 1em;
  background: color-mix(in srgb, var(--color-text-2) 45%, transparent);
  transition: background 0.15s;
}
.ef-commutador .ef-commutador-pista::after {
  content: "";
  position: absolute;
  top: 0.15em;
  left: 0.15em;
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  background: var(--color-fons-pagina, #fff);
  transition: transform 0.15s;
}
.ef-commutador[aria-checked=true] .ef-commutador-pista {
  background: var(--color1);
}
.ef-commutador[aria-checked=true] .ef-commutador-pista::after {
  transform: translateX(1em);
}
.ef-commutador:focus-visible {
  outline: 2px solid var(--color1);
  outline-offset: 2px;
}

#formulari.ef-mode-frase > #estadistiquesGeneric, #formulari.ef-mode-frase > #estadistiquesCalcul {
  display: none;
}
#formulari.ef-mode-frase > #estadistiquesFrase {
  grid-column: 1/-1;
}

#estadistiquesFrase .ef-frase {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 0.55em 0.45em;
  margin: 0.5em 0 0.25em;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-2);
}

.ef-tros {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.1em 0.55em;
  border: 1px solid color-mix(in srgb, var(--color1) 45%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--color1) 12%, transparent);
  color: var(--color-text);
  font: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.ef-tros i {
  font-size: 0.7em;
  color: var(--color-text-2);
}
.ef-tros:hover, .ef-tros:focus-visible {
  background: color-mix(in srgb, var(--color1) 22%, transparent);
}
.ef-tros.ef-tros--afegeix {
  border-style: dashed;
  background: transparent;
  color: var(--color-text-2);
  font-weight: normal;
}

.ef-paraula--enganxada {
  margin-left: -0.4em;
}

.filtres-modal.ef-modal .filtres-modal__cos {
  container-type: inline-size;
}
.filtres-modal.ef-modal .filtres-modal__cos .ts-wrapper.multi {
  max-width: min(50vw, 100cqw - 6em);
}
.filtres-modal.ef-modal .filtres-modal__cos div.dada, .filtres-modal.ef-modal .filtres-modal__cos .drag-parent {
  flex-wrap: wrap;
  max-width: 100%;
}
.filtres-modal.ef-modal .filtres-modal__cos .table-div {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.filtres-modal.ef-modal .filtres-modal__cos .table-div select, .filtres-modal.ef-modal .filtres-modal__cos .table-div .ts-wrapper {
  max-width: 100%;
}
.filtres-modal.ef-modal input[name$="[ordre]"] {
  display: none;
}

:root.dark .ef-tros {
  border-color: color-mix(in srgb, var(--color1) 40%, var(--color-text-2));
  background: color-mix(in srgb, var(--color1) 25%, var(--color-fons-2));
}
:root.dark .ef-commutador[aria-checked=true] .ef-commutador-pista {
  background: color-mix(in srgb, var(--color1) 50%, var(--color-text));
}
:root.dark .ef-commutador .ef-commutador-pista::after {
  background: var(--color-fons-2);
}