:root {
  --fons: #f6f7f9; --superficie: #fff; --text: #1d2330; --suau: #5d6675; --vora: #dde1e7;
  --primari: #1f5fbf; --primari-text: #fff; --ok: #1e7a46; --error: #b3261e;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --fons: #14171c; --superficie: #1d2128; --text: #e6e9ee; --suau: #9aa3b2; --vora: #313741;
          --primari: #5b9cf5; --primari-text: #0b1220; --ok: #5fcf8d; --error: #ff8a80; color-scheme: dark; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, sans-serif; background: var(--fons); color: var(--text); }
main { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }
main.estreta, .estreta { max-width: 520px; }
a { color: var(--primari); }
h1 { font-size: 1.5rem; margin: 0 0 16px; }
.capcalera { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 10px 16px;
             background: var(--superficie); border-bottom: 1px solid var(--vora); }
.capcalera nav { display: flex; gap: 12px; flex: 1; }
.marca { font-weight: 700; text-decoration: none; color: var(--text); }
.eines { display: flex; gap: 8px; align-items: center; color: var(--suau); }
.usuari { margin-left: 8px; color: var(--text); }
.inline { display: inline; }
.centrat { display: grid; place-items: center; min-height: 100vh; }
.targeta { background: var(--superficie); border: 1px solid var(--vora); border-radius: 8px; padding: 24px; width: 100%; }
label { display: block; margin: 0 0 12px; }
label > span { display: block; font-size: .9rem; color: var(--suau); margin-bottom: 4px; }
input, select { width: 100%; padding: 8px 10px; border: 1px solid var(--vora); border-radius: 6px;
                background: var(--superficie); color: var(--text); font: inherit; }
td select { width: auto; }
fieldset { border: 1px solid var(--vora); border-radius: 8px; margin: 0 0 16px; padding: 12px 16px; }
button, .boto { display: inline-block; padding: 8px 16px; border: 0; border-radius: 6px; background: var(--primari);
                color: var(--primari-text); font: inherit; cursor: pointer; text-decoration: none; }
button.petit { padding: 4px 10px; }
button.enllac { background: none; color: var(--primari); padding: 0; }
.error { color: var(--error); }
.ok { color: var(--ok); }
.idiomes { text-align: center; margin: 16px 0 0; }
.titol-accions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.taula-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--superficie); }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--vora); white-space: nowrap; }
.etiqueta { padding: 2px 8px; border-radius: 10px; font-size: .85rem; border: 1px solid var(--vora); }
.etiqueta.ACTIU { color: var(--ok); } .etiqueta.SUSPES, .etiqueta.BAIXA { color: var(--error); }
.xifres { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.xifra { background: var(--superficie); border: 1px solid var(--vora); border-radius: 8px; padding: 16px; }
.xifra strong { display: block; font-size: 1.8rem; }
.xifra span { color: var(--suau); }
.submenu { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 16px; }
.submenu a { padding: 6px 12px; border-radius: 6px; text-decoration: none; border: 1px solid var(--vora); background: var(--superficie); }
.submenu a.actiu { background: var(--primari); color: var(--primari-text); border-color: var(--primari); }
tr.inactiu td { color: var(--suau); text-decoration: line-through; }
tr.inactiu td.accions { text-decoration: none; }
td.accions { display: flex; gap: 12px; }
label.casella { display: flex; gap: 8px; align-items: center; }
label.casella input { width: auto; }
.ajuda { color: var(--suau); }
h2 { font-size: 1.15rem; margin: 24px 0 8px; }
h3 { font-size: 1rem; margin: 16px 0 6px; }
.graella { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.enviament { border-top: 1px dashed var(--vora); padding-top: 8px; margin-top: 8px; }
.enviament:first-of-type { border-top: 0; margin-top: 0; }
.accions-barra { display: flex; gap: 8px; flex-wrap: wrap; }
button.secundari, .boto.secundari { background: var(--superficie); color: var(--primari); border: 1px solid var(--primari); }
button.perill { background: var(--error); }
button:disabled { opacity: .5; cursor: not-allowed; }
.avis { border: 1px solid var(--error); border-radius: 8px; padding: 8px 16px; margin: 12px 0; }
.detall { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; }
@media (max-width: 760px) { .detall { grid-template-columns: 1fr; } }
table.clau-valor th { width: 40%; color: var(--suau); font-weight: normal; white-space: normal; }
table.clau-valor td { white-space: normal; }
.qr-imatge { background: #fff; padding: 8px; border-radius: 8px; max-width: 260px; }
.qr-imatge svg { display: block; width: 100%; height: auto; }
a.url { word-break: break-all; font-size: .85rem; }
.etiqueta.EMES, .etiqueta.FINALITZAT { color: var(--ok); } .etiqueta.ANULLAT { color: var(--error); }
.etiqueta.ESBORRANY { color: var(--suau); }
td.detall-json { white-space: normal; max-width: 360px; font-size: .8rem; color: var(--suau); word-break: break-all; }