@charset "UTF-8";
:root {
  --ink:#213a32;
  --muted:#65766e;
  --paper:#f5f4ee;
  --green:#245d47;
  --line:#dce2d8;
  --red:#a63636;
  --orange:#91501a;
  --yellow:#746010;
  --radius:14px;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-size:15px;
  line-height:1.5}
* {
  box-sizing:border-box}
body {
  margin:0}
a {
  color:var(--green);
  text-underline-offset:3px}
button,input,select,textarea {
  font:inherit}
button,.button {
  background:var(--green);
  color:#fff;
  border:1px solid var(--green);
  border-radius:8px;
  padding:10px 18px;
  font-weight:650;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px}
button:hover,.button:hover {
  filter:brightness(.93)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:3px solid #bc861c;
  outline-offset:3px}
.secondary {
  background:#fff;
  color:var(--green);
  border-color:#bdcdbf}
.small {
  padding:7px 12px;
  font-size:.86rem;
  min-height:38px}
.text-button {
  padding:4px 0;
  border:0;
  background:none;
  color:var(--green);
  font-weight:500}
.topbar {
  background:#fffdf9;
  border-bottom:1px solid var(--line);
  padding:18px max(24px,calc((100vw - 1280px)/2));
  display:flex;
  align-items:center;
  gap:42px}
.brand {
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  font-family:Georgia,serif;
  font-size:23px;
  line-height:1.1;
  font-weight:bold;
  white-space:nowrap}
.brand small {
  font:9px system-ui;
  letter-spacing:2px;
  display:block;
  margin-top:6px}
.brand-mark {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:43px;
  height:46px;
  border-radius:5px 13px 5px 5px;
  background:var(--green);
  color:#fff;
  font:bold 24px Georgia,serif;
  letter-spacing:-2px}
.topbar nav {
  display:flex;
  gap:6px}
.topbar nav a {
  padding:10px 14px;
  text-decoration:none;
  font-weight:600;
  border-radius:7px;
  color:var(--muted)}
.topbar nav a[aria-current] {
  background:#e9efe7;
  color:var(--green)}
.user-menu {
  display:flex;
  gap:18px;
  align-items:center;
  margin-left:auto;
  font-size:.88rem}
.user-menu a {
  text-decoration:none}
.container {
  max-width:1280px;
  margin:auto;
  padding:38px 24px 50px}
.page-heading {
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:center;
  margin-bottom:30px}
.eyebrow {
  font-size:.72rem;
  letter-spacing:1.8px;
  font-weight:750;
  color:var(--green);
  margin:0 0 8px}
h1 {
  font:normal clamp(29px,3vw,40px)/1.15 Georgia,serif;
  letter-spacing:-.6px;
  margin:0 0 10px}
h2 {
  font:normal 24px/1.25 Georgia,serif;
  margin:0 0 15px}
h3 {
  font-size:1.08rem;
  margin:0 0 6px}
p {
  margin:0 0 14px}
.subtitle,.muted,.help {
  color:var(--muted)}
.subtitle {
  margin:0}
.help {
  font-size:.82rem;
  margin:16px 0 0}
.actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap}
.stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:30px}
.stat {
  padding:22px;
  border-radius:var(--radius);
  text-decoration:none;
  display:flex;
  flex-direction:column;
  gap:6px;
  color:var(--ink);
  border:1px solid #dedfd4;
  background:#fff}
.stat strong {
  font:normal 44px Georgia,serif}
.stat span {
  font-weight:650}
.stat small {
  color:var(--muted)}
.stat.pending {
  border-top:4px solid #b94e49}
.stat.ordered {
  border-top:4px solid #cb8847}
.stat.arrived {
  border-top:4px solid #c8ab45}
.card {
  background:#fffdf9;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:18px}
.section-heading h2 {
  margin:0 0 4px}
.section-heading p {
  color:var(--muted);
  margin:0}
.section-heading a {
  white-space:nowrap;
  font-size:.9rem}
.order-row {
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(200px,1fr) 155px;
  gap:20px;
  padding:22px 14px;
  border-top:1px solid var(--line);
  border-left:4px solid transparent}
.order-row.pending {
  border-left-color:#b94e49}
.order-row.ordered {
  border-left-color:#cb8847}
.order-row.arrived {
  border-left-color:#c8ab45}
.order-row.collected {
  border-left-color:#478360}
.order-main h3 {
  overflow-wrap:anywhere}
.order-main h3 a {
  text-decoration:none}
.order-main h3 a:hover {
  text-decoration:underline}
.order-main p {
  font-size:.86rem;
  margin:3px 0;
  overflow-wrap:anywhere}
.meta {
  font-size:.67rem;
  color:var(--muted);
  font-weight:600;
  letter-spacing:.9px;
  margin-bottom:7px}
.badge {
  font-size:.76rem;
  line-height:1.5;
  display:inline-block;
  padding:4px 10px;
  border-radius:5px;
  font-weight:650}
.badge.pending {
  color:#922e2e;
  background:#fbe7e4}
.badge.ordered {
  color:#885017;
  background:#f9ebd8}
.badge.arrived {
  color:#6a570e;
  background:#f7efbe}
.badge.collected {
  color:#2d6543;
  background:#e0f0e3}
.stage-summary {
  display:flex;
  flex-direction:column;
  font-size:.75rem;
  color:var(--muted);
  gap:3px;
  margin-top:10px}
.stage-summary strong {
  font-weight:500}
.row-actions {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  justify-content:center}
.edit-link {
  font-size:.83rem;
  padding:3px 8px}
.bottom-links {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:24px;
  font-size:.82rem;
  color:var(--muted)}
.tabs {
  display:flex;
  gap:8px;
  border-bottom:1px solid var(--line);
  margin-bottom:20px}
.tabs a {
  text-decoration:none;
  padding:12px 22px;
  font-weight:650}
.tabs [aria-current] {
  border-bottom:3px solid var(--green)}
label {
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:.85rem;
  font-weight:600;
  margin-bottom:16px}
input,select,textarea {
  border:1px solid #bfcbbf;
  border-radius:7px;
  padding:10px 12px;
  min-width:0;
  width:100%;
  background:#fff;
  color:var(--ink);
  font-weight:400;
  min-height:44px}
textarea {
  resize:vertical}
input:disabled,select:disabled {
  background:#eeefe9;
  color:var(--muted)}
.filters {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 16px;
  margin-bottom:22px;
  padding:20px}
.filters .search {
  grid-column:span 2}
.filter-actions {
  display:flex;
  gap:16px;
  align-items:center;
  padding-top:4px}
.filter-actions a {
  font-size:.85rem}
.list-card {
  padding:8px 18px}
.list-card .order-row:first-child {
  border-top:0}
.empty {
  padding:45px 16px;
  text-align:center;
  color:var(--muted)}
.empty-symbol {
  display:inline-flex;
  width:46px;
  height:46px;
  background:#e8eee4;
  border-radius:50%;
  align-items:center;
  justify-content:center;
  color:var(--green);
  font-size:24px;
  margin-bottom:15px}
.empty p {
  margin:0}
.pagination {
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:center;
  margin-top:24px}
.editor {
  max-width:1000px}
.editor .card {
  margin-bottom:20px}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 24px}
.wide {
  grid-column:1/-1}
.tracking {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin-top:22px}
.tracking-step {
  border:1px solid var(--line);
  border-radius:8px;
  padding:14px}
.check {
  flex-direction:row;
  align-items:center;
  font-size:.95rem;
  gap:9px}
.check input {
  width:19px;
  height:19px;
  min-height:0;
  accent-color:var(--green)}
.date-label {
  font-size:.73rem;
  margin-bottom:0}
.date-label input {
  font-size:.85rem;
  padding:8px}
.save-bar {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:24px;
  padding:10px 0}
.detail-layout {
  display:grid;
  grid-template-columns:1.65fr 1fr;
  gap:24px}
.details {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin:26px 0}
.details dt {
  color:var(--muted);
  font-size:.8rem}
.details dd {
  margin:4px 0 0;
  font-weight:600;
  overflow-wrap:anywhere}
.pre-wrap {
  white-space:pre-wrap;
  overflow-wrap:anywhere}
.timeline {
  padding:0;
  list-style:none;
  margin:20px 0}
.timeline li {
  position:relative;
  padding:0 0 25px 29px;
  color:var(--muted);
  border-left:2px solid var(--line);
  margin-left:7px}
.timeline li:before {
  content:"";
  position:absolute;
  left:-7px;
  top:5px;
  background:#fff;
  border:2px solid #bdcbbd;
  border-radius:50%;
  width:8px;
  height:8px}
.timeline li.done:before {
  background:var(--green);
  border-color:var(--green)}
.timeline li.done {
  color:var(--ink)}
.timeline strong {
  display:block;
  font-size:.83rem;
  font-weight:500}
.vertical {
  flex-direction:column;
  align-items:stretch}
.vertical button {
  width:100%}
.back-link {
  display:inline-block;
  margin-top:24px}
.catalog-grid,.users-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:start}
.inline-form {
  display:flex;
  align-items:flex-end;
  gap:10px}
.inline-form label {
  flex:1;
  margin-bottom:0}
.catalog-list {
  margin-top:25px}
.catalog-row {
  padding:16px 0;
  border-top:1px solid var(--line)}
.catalog-row>.inline-form {
  margin-bottom:2px}
.catalog-row>form+form {
  text-align:right}
.user-row {
  border-top:1px solid var(--line);
  padding:20px 0}
.user-row p {
  font-size:.85rem;
  color:var(--muted)}
details {
  margin-top:12px}
summary {
  cursor:pointer;
  color:var(--green);
  font-size:.85rem}
details form {
  margin-top:14px;
  padding:16px;
  background:#f3f5ee;
  border-radius:8px}
.users-layout .card>form>button {
  margin-top:18px}
.narrow {
  max-width:500px}
.notice {
  padding:16px 20px;
  border:1px solid #bdd6be;
  background:#e8f2e7;
  border-radius:9px;
  margin-bottom:24px}
.notice.error {
  background:#fff0ed;
  border-color:#e6b9b2;
  color:#8b3029}
.notice ul {
  padding-left:22px;
  margin-bottom:0}
.auth {
  max-width:440px;
  margin:35px auto;
  padding:35px}
.auth .brand-mark {
  margin-bottom:26px}
.auth h1 {
  font-size:34px}
.auth>p:not(.eyebrow) {
  color:var(--muted)}
.auth form {
  margin-top:25px}
.auth button {
  width:100%;
  margin-top:8px}
.login-shell {
  padding:30px 18px;
  min-height:85vh}
.footer {
  text-align:center;
  border-top:1px solid var(--line);
  padding:20px;
  color:var(--muted);
  font-size:.75rem}
.skip {
  position:absolute;
  top:-100px;
  left:15px;
  background:#fff;
  padding:10px;
  z-index:10}
.skip:focus {
  top:10px}
[hidden] {
  display:none!important}
@media(max-width:1000px) {
  .topbar {
  gap:15px;
  flex-wrap:wrap;
  padding:16px 24px}
.topbar nav {
  order:3;
  width:100%}
.stats {
  grid-template-columns:repeat(2,1fr)}
.tracking {
  grid-template-columns:repeat(2,1fr)}
.order-row {
  grid-template-columns:minmax(0,1fr) minmax(180px,1fr)}
.row-actions {
  grid-column:1/-1;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start}
.filters {
  grid-template-columns:repeat(3,minmax(0,1fr))}
.catalog-grid {
  grid-template-columns:1fr}
.section-heading {
  flex-wrap:wrap}
}
@media(max-width:640px) {
  .container {
  padding:26px 15px}
.topbar {
  padding:14px 15px}
.topbar nav {
  gap:0;
  overflow:auto}
.topbar nav a {
  padding:8px 12px}
.brand {
  font-size:20px}
.user-menu {
  gap:12px;
  font-size:.78rem}
.user-menu a {
  max-width:100px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap}
.page-heading {
  align-items:flex-start;
  flex-direction:column;
  gap:18px;
  margin-bottom:22px}
.stats {
  gap:10px}
.stat {
  padding:15px}
.stat span {
  font-size:.85rem}
.stat strong {
  font-size:36px}
.stat small {
  font-size:.7rem}
.card {
  padding:19px}
.section-heading a {
  white-space:normal}
.order-row {
  grid-template-columns:1fr;
  padding:18px 10px;
  gap:12px}
.order-progress {
  grid-row:2}
.stage-summary {
  flex-direction:row;
  flex-wrap:wrap;
  gap:3px 10px}
.row-actions {
  flex-wrap:wrap}
.list-card {
  padding:4px 10px}
.filters {
  grid-template-columns:1fr 1fr;
  gap:0 12px}
.filters .search {
  grid-column:1/-1}
.filter-actions {
  grid-column:1/-1}
.form-grid,.detail-layout,.users-layout {
  grid-template-columns:1fr}
.wide {
  grid-column:auto}
.tracking {
  gap:10px}
.tracking-step {
  padding:10px}
.check {
  font-size:.84rem}
.date-label input {
  padding:6px;
  font-size:.78rem}
.bottom-links {
  flex-direction:column}
.auth {
  padding:25px;
  margin-top:5px}
.details {
  gap:18px}
.section-heading .badge {
  margin-top:5px}
.pagination {
  font-size:.8rem;
  gap:9px}
.pagination .button {
  padding:8px 12px}
}
/* Identitat corporativa: imatge original intacta, retall només de presentació. */
:root {
  --ink:#342c2b;
  --muted:#756b67;
  --paper:#faf8f6;
  --green:#b80c04;
  --line:#e7ded9}
.topbar,.card {
  background:#fff}
.topbar {
  padding-top:12px;
  padding-bottom:12px}
.brand {
  line-height:0}
.logo-crop {
  display:block;
  position:relative;
  overflow:hidden;
  width:104px;
  aspect-ratio:85/76;
  background:#fff;
  flex-shrink:0}
.logo-crop img {
  position:absolute;
  display:block;
  width:117.647059%;
  height:auto;
  max-width:none;
  left:-8.235294%;
  top:-10.526316%}
.auth .logo-crop {
  width:180px;
  margin:0 auto 28px}
.topbar nav a[aria-current] {
  background:#faebe7;
  color:var(--green)}
.secondary {
  border-color:#d8bcb6}
.empty-symbol {
  background:#faebe7}
.stat {
  border-color:#e7ded9}
.skip {
  color:var(--green)}
details form {
  background:#faf3f0}
.timeline li.done:before {
  background:#447655;
  border-color:#447655}
.notice.success {
  color:#285238}
.stat.pending {
  border-top-color:#b94e49}
.stat.ordered {
  border-top-color:#cb8847}
.stat.arrived {
  border-top-color:#c8ab45}
@media(max-width:640px) {
  .logo-crop {
  width:84px}
.topbar {
  gap:10px}
.auth .logo-crop {
  width:155px}
.auth h1 {
  font-size:30px}
}
/* Cancel·lats: gris clar i contingut ratllat;
   motiu i data sempre llegibles. */
.order-row.cancelled {
  background:#f1f2f3;
  border-left-color:#a6aaad}
.order-row.cancelled .order-main {
  text-decoration:line-through;
  color:#606568}
.order-row.cancelled .order-main a {
  color:#606568}
.badge.cancelled {
  background:#e0e3e5;
  color:#464c50}
.cancellation-notice {
  background:#f1f2f3;
  border-color:#cdd1d4;
  color:#464c50}
.cancellation-notice p {
  margin:7px 0 0}
.cancellation-summary {
  overflow-wrap:anywhere;
  color:#464c50}
.age-label {
  font-weight:600;
  color:var(--ink)}
.waiting-label {
  font-weight:700;
  color:#746010}
.cancel-link {
  color:#756b67}
#cancellation {
  scroll-margin-top:20px}
/* Accessos ràpids persistents als quatre llistats actius. */
.quick-status {
  gap:12px;
  margin-bottom:26px}
.quick-status .stat {
  padding:13px 17px;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:70px}
.quick-status .stat span {
  font-size:.86rem}
.quick-status .stat strong {
  font-size:29px;
  flex-shrink:0}
.quick-status .stat[aria-current="page"] {
  background:#fff3ef;
  box-shadow:0 0 0 2px var(--green)}
@media(max-width:640px) {
  .quick-status {
  gap:10px;
  margin-bottom:22px}
.quick-status .stat {
  padding:10px 12px;
  gap:8px;
  min-height:70px}
.quick-status .stat span {
  font-size:.78rem}
.quick-status .stat strong {
  font-size:25px}
}
label:has(> input[required]:not(:disabled), > select[required]:not(:disabled), > textarea[required]:not(:disabled)) > .field-label::after {
  content:" *";
  color:#b80c04;
  font-weight:800}
.required-legend {
  font-size:.8rem;
  color:var(--muted);
  margin:0 0 16px}
.inline-form>.required-legend {
  display:none}
.field-label {
  display:block}
input[readonly] {
  background:#f1f2ef;
  color:#5d635d}
/* Seguiment i densitat moderada per a monitors d’escriptori. */
.badge.pending {
  background:#f5dce4;
  color:#771f3c}
.stat.pending {
  border-top-color:#8b2949}
.order-row.pending {
  border-left-color:#8b2949;
  background:#fbf0f4}
.badge.ordered {
  background:#ffe0b5;
  color:#874100}
.stat.ordered {
  border-top-color:#ed8a24}
.order-row.ordered {
  border-left-color:#ed8a24;
  background:#fff4e8}
.badge.arrived {
  background:#ffed54;
  color:#574700}
.stat.arrived {
  border-top-color:#efd300}
.order-row.arrived {
  border-left-color:#efd300;
  background:#fffbe0}
.badge.ready {
  background:#d9efff;
  color:#225979}
.stat.ready {
  border-top:4px solid #8ec9ed}
.order-row.ready {
  border-left-color:#8ec9ed;
  background:#f2f9ff}
.badge.collected {
  background:#d8efda;
  color:#285d35}
.order-row.collected {
  background:#edf8ee;
  border-left-color:#8bc797}
@media(min-width:1001px) {
  .container {
  padding-top:25px}
.page-heading {
  margin-bottom:20px}
.stats {
  margin-bottom:20px}
.stat {
  padding:16px}
.stat strong {
  font-size:36px}
.card {
  padding:21px}
.order-row {
  padding:15px 12px;
  gap:16px}
.list-card {
  padding:6px 15px}
.stage-summary {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3px 10px;
  margin-top:7px}
.row-actions {
  gap:5px}
.filters {
  padding:15px}
.filters label {
  margin-bottom:11px}
.tracking {
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px}
.tracking-step {
  padding:10px}
}
.email-sent {
  color:#285d35;
  font-weight:650}
.form-grid>.help.wide {
  margin:0 0 16px}
.stage-summary .email-sent {
  grid-column:1/-1;
  background:#e3f3e6;
  border:1px solid #bddcc4;
  border-radius:5px;
  padding:4px 7px;
  width:fit-content}
.managed-mark {
  color:#35536c;
  font-weight:650;
  background:#edf2f6;
  border-radius:4px;
  padding:2px 5px;
  width:fit-content}
/* Separació entre encàrrecs sense augmentar gaire l’alçada del llistat. */
.order-list {
  background:#fff}
.order-row {
  border-top-color:#bfc3c7}
.order-row+.order-row {
  margin-top:20px}
/* Més espai de treball en pantalles Full HD. */
.container {
  max-width:1600px}
.order-main h3 {
  font-size:1.18rem}
@media(min-width:1001px) {
  .topbar {
  padding-left:max(24px,calc((100vw - 1600px)/2));
  padding-right:max(24px,calc((100vw - 1600px)/2))}
.editor {
  max-width:1200px}
}
/* Tipografia més llegible als llistats i formularis. */
:root {
  font-size:17px}
.order-main h3 {
  font-size:1.25rem;
  line-height:1.25}
.order-main p {
  font-size:.95rem}
.meta {
  font-size:.78rem}
.badge,.stage-summary {
  font-size:.85rem}
.small,.edit-link {
  font-size:.92rem}
label {
  font-size:.92rem}
.help,.subtitle,.stat small {
  font-size:.9rem}
.date-label {
  font-size:.82rem}
.details dt {
  font-size:.9rem}
/* Jerarquia clara: encàrrec, seguiment i accions. */
.order-row {
  grid-template-columns:minmax(0,1.5fr) minmax(270px,1fr) 210px;
  gap:20px;
  padding-top:12px;
  padding-bottom:12px;
  align-items:start}
.order-main h3 {
  margin:4px 0 6px}
.order-main p {
  margin:3px 0}
.order-progress {
  border-left:1px solid #d5dadd;
  padding-left:20px}
.stage-summary {
  display:flex;
  flex-direction:column;
  gap:5px}
.order-dates {
  margin:0}
.stage-dates {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px 12px;
  padding-top:8px}
.row-actions {
  align-items:stretch;
  gap:6px}
.row-actions form button {
  width:100%}
.row-actions .cancel-link {
  order:10;
  text-align:center}
.row-actions .edit-link {
  text-align:center}
.order-dates summary {
  font-size:.85rem}
@media(max-width:1100px) {
  .topbar {
  flex-wrap:wrap;
  gap:15px}
.order-row {
  grid-template-columns:minmax(0,1fr) minmax(240px,1fr)}
.row-actions {
  grid-column:1/-1;
  flex-direction:row;
  flex-wrap:wrap}
.order-progress {
  padding-left:14px}
}
@media(max-width:640px) {
  .order-row {
  grid-template-columns:1fr}
.order-progress {
  border-left:0;
  padding-left:0;
  border-top:1px solid #ddd;
  padding-top:12px}
.stage-dates {
  grid-template-columns:1fr}
.row-actions {
  gap:8px}
}

.age-label.overdue{color:#b00020;font-weight:800}.advanced-filters{margin:0 0 20px}.advanced-filters>summary{padding:12px 16px;border:1px solid #c8cdd0;border-radius:8px;background:#fff;font-weight:650}.advanced-filters .filters{margin:10px 0 0}.access-table{overflow-x:auto}.access-table table{border-collapse:collapse;width:100%;text-align:left}.access-table th,.access-table td{padding:12px;border-bottom:1px solid #ddd}.topbar{flex-wrap:wrap}

/* Cinc fases i contrast als llistats. */
.badge.unmanaged { background:#eee3f5; color:#50335f }
.stat.unmanaged { border-top:4px solid #79568b }
.order-row.unmanaged { border-left-color:#79568b; background:#f6f0fa }
.order-row { color:#303438 }
.order-row .muted,.order-row .meta,.order-row .stage-summary { color:#43474b }
@media(min-width:1101px) { .stats { grid-template-columns:repeat(5,minmax(0,1fr)) } }
/* Tipus d'encàrrec, prevenda i estadístiques. */
.kind-mark { display:inline-flex;align-items:center;gap:7px;font-weight:750;color:#303438;background:#fff;border:1px solid #a7adb3;border-radius:6px;padding:3px 7px;vertical-align:middle }
.kind-mark svg { width:23px;height:23px;flex-shrink:0 }
.age-warning { width:22px;height:22px;vertical-align:middle;margin-right:6px }
.presale-mark { display:inline-flex;gap:9px;align-items:center;color:#303438;font-size:.85rem;margin:5px 0 }
.traffic-light { display:inline-flex;flex-direction:column;gap:3px;padding:5px;background:#25282c;border-radius:7px;flex-shrink:0 }
.traffic-light i { width:12px;height:12px;border-radius:50%;background:#50545a;border:1px solid #7b8086 }
.traffic-light.red i:nth-child(1) { background:#ff3b3b;box-shadow:0 0 4px #ff3b3b }
.traffic-light.amber i:nth-child(2) { background:#ffb52e;box-shadow:0 0 4px #ffb52e }
.traffic-light.green i:nth-child(3) { background:#4ee67a;box-shadow:0 0 4px #4ee67a }
.presale-fields { display:flex;gap:14px;align-items:center;flex-wrap:wrap }
.statistics-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:20px 0 }
.statistics-values { display:grid;gap:20px }.statistics-values dd { margin:4px 0;font-size:1.6rem;font-weight:750 }.statistics-values small { color:#43474b }
@media(max-width:700px) { .statistics-grid { grid-template-columns:1fr } }
/* Estadístiques: resum, recorregut i comparació visual. */
.statistics-overview { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:24px 0 }
.stat-total { display:flex;flex-direction:column;gap:6px;padding:22px 26px;border:1px solid #e1dcd6;border-radius:14px;background:#fff }
.stat-total strong { font-size:2.8rem;line-height:1.1;letter-spacing:-.04em }.stat-total>span { font-weight:650 }.stat-total small { color:#50575a }
.stat-total.collected { background:#edf6ef;border-color:#c6dfcd;color:#275b37 }.stat-total.cancelled { background:#f5eeee;border-color:#e6d4d4;color:#793b40 }
.statistics-category { --metric-color:#863c53;--metric-tint:#f8f0f3;padding:0;overflow:hidden;border-top:4px solid var(--metric-color) }
.statistics-category.stationery { --metric-color:#276b78;--metric-tint:#edf6f8 }
.statistics-category header { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:21px 24px;background:var(--metric-tint) }
.statistics-category header h2 { margin:0 }.statistics-category header>span { font-size:.85rem;color:#41484c }
.statistics-category .kind-mark { border:0;padding:0;background:transparent;color:var(--metric-color);gap:12px }
.statistics-category .kind-mark svg { width:28px;height:28px }
.statistics-category .statistics-values { gap:0;margin:0;padding:0 24px }
.stat-metric { padding:22px 0 }.stat-metric+.stat-metric { border-top:1px solid #e8e5e2 }
.stat-metric dt { display:flex;align-items:center;gap:12px;font-weight:650 }.stat-metric dt small { display:block;font-weight:400;margin-top:3px;font-size:.82rem }
.metric-step { display:grid;place-items:center;background:var(--metric-tint);color:var(--metric-color);border-radius:50%;width:35px;height:35px;font-size:.8rem;flex-shrink:0 }
.statistics-values .stat-metric dd { color:var(--metric-color);font-size:2.7rem;line-height:1.15;letter-spacing:-.03em;margin:14px 0 12px }.stat-metric dd span { font-size:1rem;letter-spacing:0;font-weight:500 }
.metric-bar { display:block;width:100%;height:8px;margin-bottom:9px }.metric-bar .track { fill:#eeeae7 }.metric-bar .fill { fill:var(--metric-color) }.metric-sample { font-size:.8rem }
.category-results { display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:18px 24px;background:#faf9f7;border-top:1px solid #e8e5e2 }
.category-results>div { display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.8rem }.category-results strong { font-size:1.6rem }.result-dot { width:8px;height:8px;border-radius:50%;background:#865157 }.result-dot.completed { background:#418057 }
.statistics-method { border:1px solid #e1dcd6;border-radius:10px;padding:16px 20px;margin:20px 0;color:#43474b;background:#fff }.statistics-method summary { font-weight:650 }
@media(max-width:700px) { .statistics-overview { gap:8px }.stat-total { padding:14px 10px }.stat-total strong { font-size:2rem }.stat-total>span,.stat-total small { font-size:.75rem }.statistics-category header { padding:18px }.statistics-category .statistics-values { padding:0 18px } }
@media(max-width:420px) { .statistics-overview { grid-template-columns:1fr }.stat-total { display:grid;grid-template-columns:1fr auto }.stat-total strong { grid-column:2;grid-row:1/3 }.category-results { grid-template-columns:1fr } }
/* Navegació principal i secundària: alineades amb el contingut. */
.topbar{padding-left:max(24px,calc((100% - 1552px)/2));padding-right:max(24px,calc((100% - 1552px)/2))}
.topbar nav,.section-nav{align-items:center}
.section-nav{display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:10px max(24px,calc((100% - 1552px)/2));background:#fff;border-bottom:1px solid var(--line)}
.section-nav>a{padding:8px 14px;border-radius:7px;text-decoration:none;font-weight:600;color:#414141}
.section-nav>a[aria-current],.nav-dropdown a[aria-current]{background:#f4e5e8;color:#772b3a}
.section-nav-label{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:#666;margin-right:16px}
.nav-group{position:relative;margin:0;align-self:center}
.nav-group>summary{display:flex;align-items:center;gap:12px;list-style:none;cursor:pointer;white-space:nowrap;margin:0;padding:9px 15px;border:1px solid #ded8d4;border-radius:10px;background:#fff;color:#403b39;font-weight:600;line-height:1.4;transition:background .15s,border-color .15s}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-group>summary::after{content:'';width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-4px;transition:transform .15s}
.nav-group[open]>summary::after{transform:rotate(225deg);margin-top:3px}
.nav-group>summary:hover{background:#f6f2ef;border-color:#bcb0a8}
.nav-group[open]>summary,.nav-group.selected>summary{background:#f4e9e9;color:#772b3a;border-color:#dbc1c5}
.nav-dropdown{position:absolute;top:100%;right:0;z-index:30;margin-top:8px;padding:7px;min-width:210px;background:#fff;border:1px solid #e8e0db;border-radius:12px;box-shadow:0 12px 35px #35251d1a}
.topbar .nav-dropdown a,.section-nav .nav-dropdown a{display:block;border-radius:7px;padding:11px 14px;font-size:15px;font-weight:500;text-decoration:none;color:#414141}
.nav-dropdown a:hover{background:#f6f2ef}
.nav-group summary:focus-visible,.section-nav a:focus-visible{outline:3px solid #772b3a;outline-offset:2px}
.loyalty-placeholder{margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.paid-badge{display:inline-block;margin-left:10px;padding:3px 8px;border-radius:6px;background:#dff2e3;color:#236139;border:1px solid #b5dcbc;font:700 12px/1.4 system-ui;vertical-align:middle;white-space:nowrap}
.payment-check{align-self:center}
@media(max-width:700px){.loyalty-placeholder{align-items:flex-start;flex-direction:column}.section-nav-label{width:100%}.topbar nav{flex-wrap:wrap}.nav-dropdown{right:auto;left:0}}
@media(max-width:640px){.topbar{padding-left:15px;padding-right:15px}.section-nav{padding:10px 15px;gap:2px}.topbar nav{overflow:visible}}

.menu-lock{width:13px;height:13px;margin-right:6px;vertical-align:-1px;opacity:.6}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.mobile-navigation{display:none}
@media(max-width:760px){.topbar{position:relative;display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap}.topbar>nav,.topbar>.user-menu,.section-nav{display:none}.mobile-navigation{display:block;margin-left:auto}.mobile-navigation>summary{list-style:none;cursor:pointer;padding:10px;border:1px solid #ded8d4;border-radius:9px}.mobile-navigation>summary::-webkit-details-marker{display:none}.mobile-navigation>summary svg{display:block;width:25px;height:25px}.topbar .mobile-navigation>nav{position:absolute;z-index:100;top:100%;right:15px;display:flex;flex-direction:column;align-items:stretch;width:min(340px,calc(100vw - 30px));max-height:75vh;overflow:auto;background:#fff;border:1px solid #ded8d4;border-radius:12px;padding:12px;box-shadow:0 8px 24px #0002}.mobile-navigation:not([open])>nav{display:none}.mobile-navigation nav details{margin:0}.mobile-navigation nav summary{padding:10px;cursor:pointer}.mobile-navigation nav details>div{margin-left:14px;padding-left:8px;border-left:1px solid #e2d8d1}.topbar .mobile-navigation nav a{display:block;font-size:15px;padding:10px}.mobile-navigation form{margin:0;padding:10px}}

@media(max-width:760px){.topbar .mobile-navigation>nav{padding:16px;border-radius:20px;border-color:#e4d6cd;box-shadow:0 18px 50px #34241f24;background:#fffdfb;gap:6px}.mobile-menu-heading{font:26px Georgia,serif;color:#792c35;padding:6px 10px 16px;border-bottom:1px solid #ecdfd6;margin-bottom:6px}.mobile-menu-heading span{display:block;font:12px system-ui;color:#8a7970;margin-top:5px}.mobile-navigation nav summary{display:flex;align-items:center;list-style:none;padding:13px 12px;font-weight:600;color:#403332;border-radius:10px;background:#f6f0eb}.mobile-navigation nav summary::-webkit-details-marker{display:none}.mobile-navigation nav summary:after{content:'';width:7px;height:7px;border-right:1.5px solid;border-bottom:1.5px solid;transform:rotate(45deg);margin-left:auto;transition:transform .15s}.mobile-navigation nav details[open]>summary{background:#f1e1e3;color:#812b38}.mobile-navigation nav details[open]>summary:after{transform:rotate(225deg)}.mobile-navigation nav details>div{margin:8px 0 8px 12px;padding-left:10px;border-left:2px solid #e9d4d7}.topbar .mobile-navigation nav a{border-radius:9px;font-weight:500;color:#554842;padding:12px}.topbar .mobile-navigation nav a[aria-current]{background:#f1e1e3;color:#812b38}.mobile-navigation nav form{border-top:1px solid #ecdfd6;margin-top:6px;padding:12px 0 0}.mobile-navigation nav form button{width:100%;padding:11px;background:#f6efeb;border-radius:10px;text-align:center}.mobile-navigation>summary{color:#812b38;background:#fff;border-color:#e6d6d2}}

@media(max-width:760px){.topbar .mobile-navigation>nav{flex-wrap:nowrap}.mobile-navigation nav>form{width:100%}}