/* ============================================================
   NexClaria — tema de marca sobre Sneat
   Llibre d'estil marc 2021 · Pantone 158C / 159C / 213C
   ============================================================ */

:root,
[data-bs-theme='light'] {
  /* --- Paleta corporativa --- */
  --nx-orange:        #ED7623;   /* Pantone 158C — color principal */
  --nx-orange-dark:   #D15E14;   /* Pantone 159C — hover / actiu */
  --nx-orange-soft:   #FDF0E6;
  --nx-magenta:       #E71D73;   /* Pantone 213C — accent */
  --nx-magenta-soft:  #FDE8F1;
  --nx-black:         #1D1D1B;   /* Pantone Black */
  --nx-grey:          #575756;   /* Pantone Cool Grey 11 */

  --nx-ink:           #1D1D1B;
  --nx-body:          #575756;
  --nx-muted:         #8A8A88;
  --nx-line:          #EAE8E4;
  --nx-surface:       #FFFFFF;
  --nx-canvas:        #FAF9F7;

  /* --- Bootstrap / Sneat --- */
  --bs-primary:               #ED7623;
  --bs-primary-rgb:           237, 118, 35;
  --bs-primary-text-emphasis: #8F4310;
  --bs-primary-bg-subtle:     #FDF0E6;
  --bs-primary-border-subtle: #F8CFAE;
  --bs-link-color:            #D15E14;
  --bs-link-hover-color:      #8F4310;
  --bs-link-color-rgb:        209, 94, 20;

  --bs-body-color:      #575756;
  --bs-body-color-rgb:  87, 87, 86;
  --bs-heading-color:   #1D1D1B;
  --bs-body-bg:         #FAF9F7;
  --bs-border-color:    #EAE8E4;

  --bs-font-sans-serif: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --bs-border-radius:    .625rem;
  --bs-border-radius-sm: .5rem;
  --bs-border-radius-lg: .875rem;
}

/* ============================================================
   1. Tipografia
   ============================================================ */

body,
.menu,
.btn,
.form-control,
.form-select,
.dropdown-menu,
.card,
.table,
.nav {
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
  color: var(--nx-body);
  background-color: var(--nx-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--nx-ink);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.fw-bold, strong, b { font-weight: 600; }

.text-heading { color: var(--nx-ink) !important; }
.text-muted   { color: var(--nx-muted) !important; }

code,
kbd,
.font-mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}

/* Xifres alineades en taules financeres */
.table td,
.table th { font-variant-numeric: tabular-nums; }

/* ============================================================
   2. Color primari
   ============================================================ */

.text-primary { color: var(--nx-orange) !important; }
.bg-primary   { background-color: var(--nx-orange) !important; }

a { color: var(--nx-orange-dark); text-decoration: none; }
a:hover { color: #8F4310; }

.btn-primary {
  --bs-btn-bg: var(--nx-orange);
  --bs-btn-border-color: var(--nx-orange);
  --bs-btn-hover-bg: var(--nx-orange-dark);
  --bs-btn-hover-border-color: var(--nx-orange-dark);
  --bs-btn-active-bg: #B94F0F;
  --bs-btn-active-border-color: #B94F0F;
  --bs-btn-disabled-bg: var(--nx-orange);
  --bs-btn-disabled-border-color: var(--nx-orange);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  box-shadow: 0 2px 6px rgba(237, 118, 35, .28);
}
.btn-primary:hover { box-shadow: 0 4px 12px rgba(237, 118, 35, .34); }

.btn-outline-primary {
  --bs-btn-color: var(--nx-orange-dark);
  --bs-btn-border-color: #F0B98B;
  --bs-btn-hover-bg: var(--nx-orange);
  --bs-btn-hover-border-color: var(--nx-orange);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--nx-orange-dark);
  --bs-btn-active-border-color: var(--nx-orange-dark);
}

.btn-label-primary,
.btn-text-primary { color: var(--nx-orange-dark) !important; }
.btn-label-primary { background-color: var(--nx-orange-soft) !important; border-color: transparent; }
.btn-label-primary:hover { background-color: var(--nx-orange) !important; color: #fff !important; }

.bg-label-primary {
  background-color: var(--nx-orange-soft) !important;
  color: var(--nx-orange-dark) !important;
}
.bg-label-info    { background-color: #EAF1F8 !important; color: #3A6EA5 !important; }
.bg-label-success { background-color: #E7F5EE !important; color: #1F7A4C !important; }
.bg-label-warning { background-color: #FDF3E0 !important; color: #A66A00 !important; }
.bg-label-danger  { background-color: var(--nx-magenta-soft) !important; color: #B01458 !important; }
.bg-label-secondary { background-color: #F0EFEC !important; color: var(--nx-grey) !important; }

/* Botons secundaris mes neutres */
.btn-outline-secondary {
  --bs-btn-color: var(--nx-grey);
  --bs-btn-border-color: var(--nx-line);
  --bs-btn-hover-bg: #F5F3F0;
  --bs-btn-hover-border-color: #DAD7D2;
  --bs-btn-hover-color: var(--nx-ink);
}

/* ============================================================
   3. Formularis
   ============================================================ */

.form-control,
.form-select {
  border-color: var(--nx-line);
  border-radius: .5rem;
  color: var(--nx-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color: #B3B1AE; }

.form-control:focus,
.form-select:focus {
  border-color: var(--nx-orange);
  box-shadow: 0 0 0 3px rgba(237, 118, 35, .14);
}

.form-label {
  color: var(--nx-ink);
  font-weight: 500;
  font-size: .8125rem;
  margin-bottom: .375rem;
}

.form-check-input:checked {
  background-color: var(--nx-orange);
  border-color: var(--nx-orange);
}
.form-check-input:focus {
  border-color: var(--nx-orange);
  box-shadow: 0 0 0 3px rgba(237, 118, 35, .14);
}

.input-group .btn-outline-secondary { border-color: var(--nx-line); }

/* ============================================================
   4. Cards, taules i superficies
   ============================================================ */

.card {
  border: 1px solid var(--nx-line);
  border-radius: .875rem;
  box-shadow: 0 1px 2px rgba(29, 29, 27, .04);
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--nx-line);
  padding: 1.125rem 1.25rem;
}
.card-header h5 { font-size: 1rem; margin-bottom: 0; }

/* Sneat deixa el cos de la targeta sense coixi a dalt perque de serie la
   capcalera no porta linia. Nosaltres si que n'hi posem, i sense aquest
   coixi el primer camp queda enganxat a la linia. */
.card .card-header + .card-body,
.card .card-header + .card-content > .card-body:first-of-type {
  padding-top: 1.25rem;
}

.card-footer {
  background-color: transparent;
  border-top: 1px solid var(--nx-line);
}

.table {
  --bs-table-hover-bg: #FAF9F7;
  --bs-table-border-color: var(--nx-line);
  margin-bottom: 0;
}

.table > thead > tr > th {
  background-color: #FBFAF8;
  color: var(--nx-muted);
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--nx-line);
  padding: .75rem 1.25rem;
  white-space: nowrap;
}

.table > tbody > tr > td {
  padding: .8125rem 1.25rem;
  border-bottom-color: #F2F0ED;
  vertical-align: middle;
}

.table > tbody > tr:last-child > td { border-bottom: 0; }

.table-hover > tbody > tr { transition: background-color .12s ease; }

/* ============================================================
   5. Menu lateral
   ============================================================ */

.bg-menu-theme {
  background-color: #FFFFFF !important;
  border-right: 1px solid var(--nx-line);
}

.menu-vertical .menu-item .menu-link {
  color: var(--nx-body);
  border-radius: .5rem;
  font-size: .9rem;
  transition: background-color .12s ease, color .12s ease;
}

.menu-vertical .menu-item:not(.active) > .menu-link:hover {
  background-color: #F5F3F0;
  color: var(--nx-ink);
}

.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
  background: linear-gradient(90deg, var(--nx-orange) 0%, #F08C43 100%);
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(237, 118, 35, .3);
}
.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) .menu-icon { color: #fff !important; }

.menu-vertical .menu-item.active > .menu-toggle {
  background-color: var(--nx-orange-soft);
  color: var(--nx-orange-dark) !important;
  font-weight: 600;
}
.menu-vertical .menu-item.active > .menu-toggle .menu-icon { color: var(--nx-orange-dark) !important; }

.menu-sub .menu-item .menu-link { font-size: .8625rem; }
.menu-sub .menu-item.active .menu-link {
  color: var(--nx-orange-dark) !important;
  font-weight: 600;
}
.menu-sub .menu-item.active .menu-link::before {
  background-color: var(--nx-orange) !important;
  border-color: var(--nx-orange) !important;
}

.menu-header-text {
  color: var(--nx-muted);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .09em;
}

.menu-divider { border-color: var(--nx-line); }

/* ============================================================
   6. Navbar
   ============================================================ */

.bg-navbar-theme {
  background-color: rgba(255, 255, 255, .88) !important;
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--nx-line);
  box-shadow: none !important;
}

.layout-navbar .form-control { background: transparent; }

.dropdown-menu {
  border: 1px solid var(--nx-line);
  border-radius: .75rem;
  box-shadow: 0 12px 32px rgba(29, 29, 27, .1);
  padding: .375rem;
}
.dropdown-item { border-radius: .5rem; font-size: .875rem; }
.dropdown-item:active,
.dropdown-item.active { background-color: var(--nx-orange); color: #fff; }
.dropdown-item:hover { background-color: #F5F3F0; }

/* ============================================================
   7. Components varis
   ============================================================ */

.nav-pills .nav-link {
  color: var(--nx-body);
  border-radius: .5rem;
  font-weight: 500;
}
.nav-pills .nav-link.active {
  background-color: var(--nx-orange);
  color: #fff;
  box-shadow: 0 2px 8px rgba(237, 118, 35, .28);
}
.nav-pills .nav-link:not(.active):hover { background-color: #F5F3F0; color: var(--nx-ink); }

.accordion-button {
  color: var(--nx-ink);
  font-weight: 500;
  border-radius: .625rem !important;
}
.accordion-button:not(.collapsed) {
  background-color: var(--nx-orange-soft);
  color: var(--nx-orange-dark);
  box-shadow: none;
}
.accordion-button:focus { box-shadow: none; border-color: transparent; }
.accordion-button::after { filter: grayscale(1) opacity(.5); }

.page-link { color: var(--nx-body); border-radius: .5rem; }
.page-item.active .page-link {
  background-color: var(--nx-orange);
  border-color: var(--nx-orange);
  box-shadow: 0 2px 6px rgba(237, 118, 35, .3);
}
.page-link:hover { background-color: #F5F3F0; color: var(--nx-ink); }

.alert-success { --bs-alert-bg: #E7F5EE; --bs-alert-border-color: #BFE5D2; --bs-alert-color: #1F7A4C; }
.alert-danger  { --bs-alert-bg: #FDE8F1; --bs-alert-border-color: #F7BBD6; --bs-alert-color: #B01458; }
.alert { border-radius: .75rem; }

.badge { font-weight: 600; letter-spacing: .01em; }

hr { border-color: var(--nx-line); opacity: 1; }

/* Barra d'accent en cards destacades */
.nx-accent-top { border-top: 3px solid var(--nx-orange); }

/* ============================================================
   8. Marca
   ============================================================ */

.app-brand-logo img,
.app-brand-logo svg { display: block; }

.app-brand-text {
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--nx-ink) !important;
}

.nx-brand-mark { height: 26px; width: auto; }
.nx-brand-full { height: 28px; width: auto; }

/* ============================================================
   9. Autenticacio — pantalla partida
   ============================================================ */

.nx-auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--nx-surface);
}

@media (min-width: 992px) {
  .nx-auth { grid-template-columns: 1.05fr .95fr; }
}

.nx-auth__aside {
  display: none;
  position: relative;
  overflow: hidden;
  padding: 3.5rem;
  color: #fff;
  background: linear-gradient(150deg, #1D1D1B 0%, #2A2724 45%, #46331F 100%);
}

@media (min-width: 992px) {
  .nx-auth__aside { display: flex; flex-direction: column; justify-content: space-between; }
}

.nx-auth__aside::before {
  content: '';
  position: absolute;
  width: 620px; height: 620px;
  right: -220px; top: -180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(237,118,35,.42) 0%, rgba(237,118,35,0) 68%);
}
.nx-auth__aside::after {
  content: '';
  position: absolute;
  width: 460px; height: 460px;
  left: -180px; bottom: -200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(231,29,115,.26) 0%, rgba(231,29,115,0) 70%);
}

.nx-auth__aside > * { position: relative; z-index: 1; }

.nx-auth__claim {
  font-size: clamp(1.75rem, 2.4vw, 2.5rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 1rem;
}
.nx-auth__claim em {
  font-style: normal;
  color: var(--nx-orange);
}

.nx-auth__lead {
  color: rgba(255,255,255,.72);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 34ch;
  margin: 0;
}

.nx-auth__points {
  list-style: none;
  padding: 0;
  margin: 2.25rem 0 0;
  display: grid;
  gap: .875rem;
}
.nx-auth__points li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  color: rgba(255,255,255,.82);
  font-size: .9375rem;
}
.nx-auth__points i {
  color: var(--nx-orange);
  font-size: 1.125rem;
  line-height: 1.35;
}

.nx-auth__foot {
  font-size: .8125rem;
  color: rgba(255,255,255,.45);
}

.nx-auth__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  background: var(--nx-surface);
}

.nx-auth__box {
  width: 100%;
  max-width: 27rem;
}

.nx-auth__logo { margin-bottom: 2.5rem; }
.nx-auth__logo img { height: 34px; width: auto; }

.nx-auth__title {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--nx-ink);
  margin-bottom: .375rem;
}
.nx-auth__sub {
  color: var(--nx-muted);
  margin-bottom: 2rem;
  font-size: .9375rem;
}

.nx-auth .form-control {
  padding: .6875rem .875rem;
  font-size: .9375rem;
}

.nx-auth .btn-primary {
  padding: .6875rem 1rem;
  font-weight: 600;
  font-size: .9375rem;
}

.nx-auth__meta {
  margin-top: 2rem;
  text-align: center;
  font-size: .875rem;
  color: var(--nx-muted);
}

.nx-pw-wrap { position: relative; }
.nx-pw-wrap .form-control { padding-right: 2.5rem; }
.nx-pw-toggle {
  position: absolute;
  right: .75rem; top: 50%;
  transform: translateY(-50%);
  border: 0; background: transparent;
  color: #B3B1AE;
  padding: .25rem;
  line-height: 1;
  cursor: pointer;
}
.nx-pw-toggle:hover { color: var(--nx-grey); }

/* ============================================================
   10. Peu
   ============================================================ */

.content-footer .footer-container {
  border-top: 1px solid var(--nx-line);
  color: var(--nx-muted);
  font-size: .8125rem;
}

/* L'indicador lateral de Sneat sobra amb el fons ple del item actiu */
.menu-inner > .menu-item.active::before { display: none !important; }

/* Avatar amb inicials */
.nx-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--nx-orange) 0%, #F2953F 100%);
  color: #fff;
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .02em;
  line-height: 1;
  user-select: none;
  flex-shrink: 0;
}

/* Codis comptables: dada, no enllac */
code {
  color: var(--nx-ink);
  background: #F3F1ED;
  padding: .125rem .375rem;
  border-radius: .3125rem;
}
.table code { background: transparent; padding: 0; color: var(--nx-grey); }

/* ============================================================
   11. Sense navbar superior
   ============================================================ */

.layout-page { padding-top: 0 !important; }

.content-wrapper > .container-xxl.container-p-y,
.content-wrapper > .container-fluid.container-p-y { padding-top: 1.5rem !important; }

/* Boto de menu flotant per a mobil */
.nx-menu-toggle {
  position: fixed;
  top: 1rem; left: 1rem;
  z-index: 1080;
  width: 42px; height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--nx-line);
  border-radius: .625rem;
  background: #fff;
  color: var(--nx-ink);
  box-shadow: 0 4px 14px rgba(29, 29, 27, .1);
}
.nx-menu-toggle i { font-size: 1.375rem; }

@media (max-width: 1199.98px) {
  .content-wrapper > .container-xxl.container-p-y,
  .content-wrapper > .container-fluid.container-p-y { padding-top: 4.25rem !important; }
}

/* ============================================================
   12. Targeta d'usuari al peu del menu
   ============================================================ */

.nx-usercard {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem;
  margin: 0 .5rem .5rem;
  border-top: 1px solid var(--nx-line);
}

.nx-usercard__btn {
  display: flex;
  align-items: center;
  gap: .625rem;
  flex: 1 1 auto;
  min-width: 0;
  padding: .375rem;
  border: 0;
  border-radius: .625rem;
  background: transparent;
  text-align: left;
  transition: background-color .12s ease;
}
.nx-usercard__btn:hover { background-color: #F5F3F0; }
.nx-usercard__btn::after { display: none; }

.nx-usercard__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.nx-usercard__name {
  font-weight: 600;
  font-size: .875rem;
  color: var(--nx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nx-usercard__mail {
  font-size: .75rem;
  color: var(--nx-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nx-usercard__power {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: .5rem;
  background: transparent;
  color: var(--nx-muted);
  transition: background-color .12s ease, color .12s ease;
}
.nx-usercard__power i { font-size: 1.25rem; }
.nx-usercard__power:hover { background-color: var(--nx-magenta-soft); color: var(--nx-magenta); }

/* Punt verd d'estat */
.nx-avatar--online { position: relative; width: 36px; height: 36px; }
.nx-avatar--online::after {
  content: '';
  position: absolute;
  right: -1px; bottom: -1px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #22A45D;
  border: 2px solid #fff;
}

/* Amagar la targeta quan el menu esta col·lapsat */
.layout-menu-collapsed:not(.layout-menu-hover) .nx-usercard__info,
.layout-menu-collapsed:not(.layout-menu-hover) .nx-usercard__power { display: none; }
.layout-menu-collapsed:not(.layout-menu-hover) .nx-usercard { justify-content: center; }

/* ============================================================
   13. Icones d'accio a les taules
   ============================================================ */

.table .btn-icon,
.nx-actions .btn-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .5rem;
  transition: background-color .12s ease, color .12s ease;
}

.table .btn-icon i,
.nx-actions .btn-icon i,
details summary .btn-icon i {
  font-size: 1.25rem;
  line-height: 1;
}

/* Editar en taronja, esborrar en magenta */
.table .btn-icon .bx-edit,
.table .btn-icon .bx-pencil,
details summary .btn-icon .bx-edit {
  color: var(--nx-orange);
}
.table .btn-icon:hover .bx-edit,
details summary .btn-icon:hover .bx-edit { color: var(--nx-orange-dark); }

.table .btn-icon:has(.bx-edit):hover,
details summary .btn-icon:has(.bx-edit):hover { background-color: var(--nx-orange-soft); }

.table .btn-icon .bx-trash { color: #C9C6C1; }
.table .btn-icon:hover .bx-trash { color: var(--nx-magenta); }
.table .btn-icon:has(.bx-trash):hover { background-color: var(--nx-magenta-soft); }

/* Fallback per a navegadors sense :has() */
.table .btn-text-secondary:hover { background-color: #F5F3F0; }

/* Icones dins de botons normals */
.btn i { font-size: 1.125rem; vertical-align: -.125em; }
.btn-sm i { font-size: 1rem; }

/* Icones del menu lateral */
.menu-icon { font-size: 1.375rem; }

/* Nansa de reordenacio */
.handle i { font-size: 1.25rem; }
.handle:hover i { color: var(--nx-orange); }

/* Accions en linia, sense saltar de linia */
.table td.text-end,
.table td:last-child { white-space: nowrap; }
.table td form { display: inline-block; vertical-align: middle; margin: 0; }
.table td .btn-icon { vertical-align: middle; }
.table td .btn-icon + form,
.table td form + form { margin-left: .125rem; }

/* Esborrar: magenta de marca, visible d'entrada */
.table .btn-icon .bx-trash { color: #E28BB4; }
.table .btn-icon:hover .bx-trash { color: var(--nx-magenta); }

/* Evitar que el menu amagat pinti res fora en mobil */
@media (max-width: 1199.98px) {
  .layout-wrapper { overflow-x: clip; }
}

/* ============================================================
   14. Logo oficial al menu
   ============================================================ */

.nx-logo-full { width: 100%; max-width: 210px; height: auto; display: block; }
.nx-logo-mark { display: none; height: 30px; width: 32px; object-fit: cover; object-position: left center; }
.app-brand-link { width: 100%; }

/* Menu col·lapsat: nomes la N del logotip oficial */
.layout-menu-collapsed:not(.layout-menu-hover) .nx-logo-full { display: none; }
.layout-menu-collapsed:not(.layout-menu-hover) .nx-logo-mark { display: block; }

.app-brand { padding: 1.125rem .75rem .875rem; height: auto; }

/* ============================================================
   15. Arbre del cataleg — jerarquia visible
   ============================================================ */

#catalog-tree .accordion-item {
  border: 1px solid var(--nx-line);
  border-radius: .75rem;
  margin-bottom: .625rem;
  overflow: hidden;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#catalog-tree .accordion-item:has(.accordion-collapse.show) {
  border-color: #F0B98B;
  box-shadow: 0 2px 10px rgba(237, 118, 35, .08);
}

#catalog-tree .accordion-button {
  padding: .875rem 1rem;
  border-radius: 0 !important;
  background: #fff;
}
#catalog-tree .accordion-button:not(.collapsed) {
  background: var(--nx-orange-soft);
  border-bottom: 1px solid #F5D9C0;
}
#catalog-tree .accordion-button:hover { background: #FBF9F6; }
#catalog-tree .accordion-button:not(.collapsed):hover { background: #FCE7D6; }

/* Contenidor dels grups: fons propi + guia vertical de jerarquia */
#catalog-tree .accordion-body {
  background: #FAF9F7;
  padding: .5rem .75rem .75rem 1.5rem !important;
  position: relative;
}
#catalog-tree .accordion-body::before {
  content: '';
  position: absolute;
  left: 1.5rem; top: .75rem; bottom: .75rem;
  width: 2px;
  background: #F0B98B;
  border-radius: 2px;
}

/* Grup: targeta blanca separada, penjant de la guia */
#catalog-tree details {
  background: #fff;
  border: 1px solid var(--nx-line);
  border-radius: .5rem;
  margin: 0 0 .375rem 1rem;
  overflow: hidden;
}
#catalog-tree details:last-child { margin-bottom: 0; }
#catalog-tree details[open] { border-color: #DCD8D2; }

#catalog-tree details summary {
  list-style: none;
  padding: .625rem .75rem !important;
  transition: background-color .12s ease;
}
#catalog-tree details summary::-webkit-details-marker { display: none; }
#catalog-tree details summary:hover { background: #FBF9F6; }
#catalog-tree details[open] > summary {
  background: #F7F5F2;
  border-bottom: 1px solid var(--nx-line);
}

/* Fletxa que gira en obrir */
#catalog-tree details summary .bx-chevron-right {
  transition: transform .15s ease;
  font-size: 1.125rem;
  vertical-align: -.2em;
}
#catalog-tree details[open] > summary .bx-chevron-right { transform: rotate(90deg); }

/* Comptes: guia propia, mes suau */
#catalog-tree details > div {
  padding: .5rem .75rem .5rem 1.75rem !important;
  position: relative;
}
#catalog-tree details > div::before {
  content: '';
  position: absolute;
  left: 1rem; top: .625rem; bottom: .625rem;
  width: 2px;
  background: var(--nx-line);
  border-radius: 2px;
}
#catalog-tree details table tr td { padding: .3125rem .5rem; border: 0; }
#catalog-tree details table tr:hover td { background: #FAF9F7; }

/* ============================================================
   16. Assistent d'alta (onboarding)
   ============================================================ */

.nx-wizard {
  min-height: 100vh;
  background: var(--nx-canvas);
  display: flex;
  flex-direction: column;
}

.nx-wizard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid var(--nx-line);
}
.nx-wizard__logo { height: 26px; width: auto; }

.nx-wizard__body {
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

.nx-wizard__title {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--nx-ink);
  margin-bottom: .375rem;
}
.nx-wizard__sub { color: var(--nx-muted); margin: 0; }

/* --- Stepper --- */
.nx-steps {
  list-style: none;
  display: flex;
  gap: .5rem;
  padding: 0;
  margin: 0 0 2rem;
  counter-reset: nxstep;
}

.nx-steps__item {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .75rem .875rem;
  border: 1px solid var(--nx-line);
  border-radius: .75rem;
  background: #fff;
  cursor: pointer;
  min-width: 0;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.nx-steps__item:hover { border-color: #DCD8D2; }

.nx-steps__dot {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #F0EFEC;
  color: var(--nx-muted);
  transition: background-color .15s ease, color .15s ease;
}
.nx-steps__dot i { font-size: 1.125rem; }

.nx-steps__label {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: .875rem;
  font-weight: 600;
  color: var(--nx-ink);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nx-steps__label small {
  font-size: .6875rem;
  font-weight: 500;
  color: var(--nx-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.nx-steps__item.is-current {
  border-color: var(--nx-orange);
  background: var(--nx-orange-soft);
  box-shadow: 0 2px 10px rgba(237, 118, 35, .14);
}
.nx-steps__item.is-current .nx-steps__dot { background: var(--nx-orange); color: #fff; }

.nx-steps__item.is-done .nx-steps__dot { background: #E7F5EE; color: #1F7A4C; }
.nx-steps__item.is-done .nx-steps__dot i::before { content: '\ea41'; }

@media (max-width: 767.98px) {
  .nx-steps { flex-wrap: wrap; }
  .nx-steps__item { flex: 1 1 calc(50% - .25rem); }
  .nx-steps__label small { display: none; }
}

/* --- Passos --- */
.nx-step { display: none; }
.nx-step.is-active { display: block; animation: nxFade .22s ease; }

@keyframes nxFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.nx-step__title {
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: .25rem;
}
.nx-step__hint {
  color: var(--nx-muted);
  font-size: .875rem;
  margin-bottom: 1.5rem;
}

/* --- Consentiments --- */
.nx-consent {
  display: flex;
  gap: .75rem;
  padding: 1rem;
  border: 1px solid var(--nx-line);
  border-radius: .625rem;
  margin-bottom: .625rem;
  transition: border-color .15s ease, background-color .15s ease;
}
.nx-consent:last-child { margin-bottom: 0; }
.nx-consent:hover { background: #FBFAF8; }
.nx-consent:has(input:checked) { border-color: #F0B98B; background: #FEFAF6; }
.nx-consent--error { border-color: #F7BBD6; background: var(--nx-magenta-soft); }

.nx-consent .form-check-input { flex-shrink: 0; margin-top: .125rem; }
.nx-consent label { cursor: pointer; display: flex; flex-direction: column; gap: .125rem; }
.nx-consent label strong { font-size: .9375rem; color: var(--nx-ink); font-weight: 600; }
.nx-consent label span { font-size: .8125rem; color: var(--nx-muted); line-height: 1.5; }

/* --- Botonera --- */
.nx-wizard__nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
}
.nx-wizard__progress {
  margin-left: auto;
  font-size: .8125rem;
  color: var(--nx-muted);
  font-variant-numeric: tabular-nums;
}
.nx-wizard__nav .btn-primary { min-width: 9rem; justify-content: center; }

/* ============================================================
   17. Desplegable de perfil — contrast sobre el menu blanc
   ============================================================ */

.nx-usercard .dropdown-menu {
  border: 1px solid #DCD8D2;
  box-shadow: 0 -4px 32px rgba(29, 29, 27, .16), 0 2px 8px rgba(29, 29, 27, .08);
  padding: .375rem;
}

.dropdown-header {
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--nx-muted);
  padding: .5rem .75rem .25rem;
}

/* Item actiu: taronja suau i llegible (abans quedava blanc sobre gris) */
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--nx-orange-soft) !important;
  color: var(--nx-orange-dark) !important;
  font-weight: 600;
}
.dropdown-item.active::after {
  content: '\ea41';
  font-family: 'boxicons';
  margin-left: auto;
  font-size: 1rem;
}
.dropdown-item.active { display: flex; align-items: center; }

.dropdown-divider { border-color: var(--nx-line); }

/* ============================================================
   18. Fotografia de perfil
   ============================================================ */

.nx-photo {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.nx-photo__preview {
  flex-shrink: 0;
  width: 96px; height: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--nx-line), 0 4px 14px rgba(29, 29, 27, .08);
}
.nx-photo__preview img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.nx-photo__actions { flex: 1 1 16rem; }

.nx-avatar--lg {
  width: 100%; height: 100%;
  border-radius: 0;
  font-size: 1.875rem;
}

.nx-avatar--img {
  padding: 0;
  object-fit: cover;
  background: none;
}

/* Cropper */
.nx-cropper-wrap {
  max-height: 60vh;
  background: #F3F1ED;
  border-radius: .625rem;
  overflow: hidden;
}
.nx-cropper-wrap img { display: block; max-width: 100%; }
.cropper-view-box,
.cropper-face { border-radius: 50%; }
.cropper-view-box { outline: 2px solid var(--nx-orange); outline-color: var(--nx-orange); }
.cropper-line, .cropper-point { background-color: var(--nx-orange); }
.cropper-point { width: 8px; height: 8px; opacity: .9; }

.modal-content { border: 0; border-radius: .875rem; }
.modal-header, .modal-footer { border-color: var(--nx-line); }

/* ============================================================
   19. Camps obligatoris
   ============================================================ */

.nx-req {
  color: var(--nx-orange);
  font-weight: 700;
  margin-left: .0625rem;
}

.nx-legend {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  color: var(--nx-muted);
  background: #fff;
  border: 1px solid var(--nx-line);
  border-radius: 2rem;
  padding: .375rem .875rem;
  margin-bottom: 1.25rem;
}

/* Els obligatoris porten un fil taronja a l'esquerra */
.nx-wizard .form-control[required],
.nx-wizard .form-select[required] {
  border-left: 3px solid var(--nx-orange);
}
.nx-wizard .form-control[required]:focus,
.nx-wizard .form-select[required]:focus {
  border-left-color: var(--nx-orange-dark);
}

/* Separacio entre icona i text dins dels botons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
}
.btn i { vertical-align: baseline; }
.btn-icon { gap: 0; }

/* ============================================================
   20. Consentiments i textos legals
   ============================================================ */

.nx-consent__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .375rem;
  min-width: 0;
}

/* El consentiment obligatori es marca com un camp obligatori mes */
.nx-consent:has(input[required]) {
  border-left: 3px solid var(--nx-orange);
}
.nx-consent:has(input[required]):not(:has(input:checked)) {
  background: #FEFAF6;
}

.nx-consent__tag {
  display: inline-block;
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .125rem .4375rem;
  border-radius: .25rem;
  background: var(--nx-orange-soft);
  color: var(--nx-orange-dark);
  vertical-align: .0625rem;
  margin-left: .25rem;
}
.nx-consent__tag--soft {
  background: #F0EFEC;
  color: var(--nx-muted);
}

.nx-consent__link {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--nx-orange-dark);
  text-decoration: underline;
  text-underline-offset: .1875rem;
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
}
.nx-consent__link:hover { color: #8F4310; }
.nx-consent__link i { font-size: 1rem; }

/* Cos del text legal dins del modal */
.nx-legal { font-size: .9375rem; line-height: 1.65; color: var(--nx-body); }
.nx-legal__lead {
  font-size: 1rem;
  font-weight: 600;
  color: var(--nx-ink);
  margin-bottom: .875rem;
}
.nx-legal p { margin-bottom: .875rem; }
.nx-legal ul { padding-left: 1.25rem; margin-bottom: .875rem; }
.nx-legal li { margin-bottom: .3125rem; }

/* Avis de text provisional — ha de cantar */
.nx-legal__pending {
  background: var(--nx-magenta-soft);
  border: 1px dashed #F0A0C6;
  color: #B01458;
  border-radius: .5rem;
  padding: .75rem .875rem;
  font-size: .875rem;
  font-weight: 500;
}

/* Consentiment ja atorgat i bloquejat (LOPD) */
.nx-consent--locked { background: #FAF9F7; }
.nx-consent--locked label { cursor: default; }

.nx-consent__meta {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  font-size: .75rem;
  color: #1F7A4C;
}
.nx-consent__meta i { font-size: .9375rem; }

/* Icona dins de les pestanyes verticals */
.nav-pills .nav-link i { margin-right: .5rem; font-size: 1.125rem; vertical-align: -.15em; }

/* ============================================================
   21. Importacio de sumes i saldos
   ============================================================ */

.nx-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  padding: 2.75rem 1.5rem;
  border: 2px dashed #DCD8D2;
  border-radius: .875rem;
  background: #FBFAF8;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, background-color .15s ease;
}
.nx-drop:hover,
.nx-drop.is-over { border-color: var(--nx-orange); background: var(--nx-orange-soft); }
.nx-drop.is-filled { border-style: solid; border-color: var(--nx-orange); background: #FEFAF6; }

.nx-drop > i { font-size: 2.5rem; color: var(--nx-orange); }
.nx-drop__title { font-weight: 600; color: var(--nx-ink); }
.nx-drop__hint  { font-size: .8125rem; color: var(--nx-muted); }
.nx-drop__file  { font-size: .875rem; font-weight: 600; color: var(--nx-orange-dark); margin-top: .5rem; }

.nx-file-icon {
  font-size: 1.75rem;
  color: var(--nx-orange);
  background: var(--nx-orange-soft);
  border-radius: .625rem;
  padding: .5rem;
}

.nx-help-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.nx-help-list li { display: flex; gap: .625rem; font-size: .875rem; }
.nx-help-list i { color: #1F7A4C; font-size: 1.125rem; flex-shrink: 0; }

/* Taula de mapatge de columnes */
.nx-map-table th { vertical-align: top; padding: .75rem .5rem; background: #FBFAF8; }
.nx-map-table td { white-space: nowrap; color: var(--nx-body); }
.nx-map-table tbody tr:nth-child(even) { background: #FCFBFA; }

.nx-map-head { display: flex; flex-direction: column; margin-bottom: .375rem; }
.nx-map-head__name {
  font-size: .75rem;
  font-weight: 600;
  color: var(--nx-ink);
  text-transform: none;
  letter-spacing: 0;
  max-width: 15rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nx-map-head__auto {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .625rem;
  font-weight: 600;
  color: #1F7A4C;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Periodes */
.nx-period {
  display: grid;
  grid-template-columns: minmax(9rem, 1.4fr) auto 7rem 9rem;
  gap: 1rem;
  align-items: end;
  padding: .875rem;
  border: 1px solid var(--nx-line);
  border-radius: .625rem;
  margin-bottom: .625rem;
}
.nx-period:last-child { margin-bottom: 0; }
.nx-period__label {
  font-weight: 600;
  font-size: .875rem;
  color: var(--nx-ink);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nx-period .form-check { padding-bottom: .375rem; }

@media (max-width: 767.98px) {
  .nx-period { grid-template-columns: 1fr; gap: .625rem; align-items: stretch; }
}

/* ============================================================
   22. Informe economic
   ============================================================ */

.nx-kpi { border-top: 3px solid var(--nx-orange); }
.nx-kpi--neg { border-top-color: var(--nx-magenta); }
.nx-kpi .card-body { padding: 1rem 1.125rem; }

.nx-kpi__head {
  display: flex; align-items: center; gap: .375rem;
  font-size: .75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--nx-muted); margin-bottom: .5rem;
}
.nx-kpi__head i { font-size: 1rem; color: var(--nx-orange); }
.nx-kpi__value {
  font-size: 1.375rem; font-weight: 700; color: var(--nx-ink);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.2;
}
.nx-kpi__value small { font-size: .75rem; font-weight: 500; color: var(--nx-muted); margin-left: .1875rem; }
.nx-kpi--neg .nx-kpi__value { color: var(--nx-magenta); }
.nx-kpi__sub { font-size: .75rem; color: var(--nx-muted); margin-top: .25rem; min-height: 1rem; }

/* Compte d'explotacio */
.nx-pl td, .nx-pl th { padding: .5rem 1.25rem; font-variant-numeric: tabular-nums; }
.nx-pl__head td   { font-weight: 600; color: var(--nx-ink); }
.nx-pl__total td  { font-weight: 600; background: #FBFAF8; border-top: 1px solid var(--nx-line); }
.nx-pl__key td    { font-weight: 700; background: var(--nx-orange-soft); color: var(--nx-orange-dark); }
.nx-pl__key td:first-child { color: var(--nx-orange-dark); }
.nx-pl__cash td   { font-weight: 600; background: #F2F8F5; color: #1F7A4C; border-top: 2px solid #BFE5D2; }
.nx-pl__row td:first-child { padding-left: 2rem; color: var(--nx-body); }

/* Relat */
.nx-narrative { font-size: .9375rem; line-height: 1.65; }
.nx-narrative p { margin-bottom: .75rem; color: var(--nx-body); }
.nx-narrative__title {
  font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--nx-orange-dark); margin: 1.25rem 0 .5rem;
}
.nx-narrative__title:first-child { margin-top: 0; }

/* Conclusions */
.nx-ins {
  height: 100%; padding: 1rem 1.125rem;
  border: 1px solid var(--nx-line); border-left: 3px solid var(--nx-line);
  border-radius: .625rem; background: #fff;
}
.nx-ins__head { display: flex; align-items: center; gap: .375rem; margin-bottom: .5rem; }
.nx-ins__head i { font-size: 1.125rem; }
.nx-ins__tag {
  font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.nx-ins__title { font-size: .9375rem; font-weight: 600; color: var(--nx-ink); margin-bottom: .375rem; }
.nx-ins__text  { font-size: .8125rem; line-height: 1.6; color: var(--nx-body); margin: 0; }

.nx-ins--fix   { border-left-color: var(--nx-magenta); background: #FFFCFD; }
.nx-ins--fix   .nx-ins__head i, .nx-ins--fix   .nx-ins__tag { color: var(--nx-magenta); }
.nx-ins--watch { border-left-color: var(--nx-orange); background: #FFFDFB; }
.nx-ins--watch .nx-ins__head i, .nx-ins--watch .nx-ins__tag { color: var(--nx-orange-dark); }
.nx-ins--good  { border-left-color: #22A45D; background: #FCFEFD; }
.nx-ins--good  .nx-ins__head i, .nx-ins--good  .nx-ins__tag { color: #1F7A4C; }

.nx-empty-icon { font-size: 3rem; color: #DCD8D2; }

/* ============================================================
   23. Tauler d'admin: recorregut del client
   ============================================================ */

.nx-total { text-align: right; line-height: 1.1; }
.nx-total__n { display: block; font-size: 1.75rem; font-weight: 700; color: var(--nx-ink); letter-spacing: -0.02em; }
.nx-total__l { font-size: .75rem; color: var(--nx-muted); text-transform: uppercase; letter-spacing: .05em; }

/* Barra del recorregut */
.nx-funnel-bar { display: flex; gap: 3px; height: 2.25rem; border-radius: .5rem; overflow: hidden; }
.nx-funnel-seg {
  display: flex; align-items: center; justify-content: center;
  min-width: 2.5rem;
  font-size: .75rem; font-weight: 700; color: #fff;
  transition: flex-grow .3s ease;
}
.nx-funnel-seg:first-child { border-radius: .5rem 0 0 .5rem; }
.nx-funnel-seg:last-child  { border-radius: 0 .5rem .5rem 0; }

/* Colors del recorregut: de fred (acaba d'arribar) a calent (ja hi és) */
.nx-stage--1 { --stage: #C9C6C1; }
.nx-stage--2 { --stage: #F2B27A; }
.nx-stage--3 { --stage: var(--nx-orange); }
.nx-stage--4 { --stage: #22A45D; }

.nx-funnel-seg.nx-stage--1 { background: #C9C6C1; }
.nx-funnel-seg.nx-stage--2 { background: #F2B27A; }
.nx-funnel-seg.nx-stage--3 { background: var(--nx-orange); }
.nx-funnel-seg.nx-stage--4 { background: #22A45D; }

/* Targeta de cada fase */
.nx-stage {
  height: 100%;
  padding: .875rem 1rem;
  border: 1px solid var(--nx-line);
  border-top: 3px solid var(--stage, var(--nx-line));
  border-radius: .625rem;
  background: #fff;
}
.nx-stage__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .25rem; }
.nx-stage__top i { font-size: 1.25rem; color: var(--stage); }
.nx-stage__n { font-size: 1.5rem; font-weight: 700; color: var(--nx-ink); letter-spacing: -0.02em; }
.nx-stage__label { font-size: .875rem; font-weight: 600; color: var(--nx-ink); }
.nx-stage__desc { font-size: .75rem; color: var(--nx-muted); margin: .25rem 0 0; line-height: 1.45; }

/* Xifres de suport */
.nx-tile { transition: border-color .15s ease, transform .15s ease; }
a:hover .nx-tile { border-color: #F0B98B; transform: translateY(-2px); }
.nx-tile__head {
  display: flex; align-items: center; gap: .375rem;
  font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--nx-muted); margin-bottom: .375rem;
}
.nx-tile__head i { font-size: 1rem; color: var(--nx-orange); }
.nx-tile__n { font-size: 1.625rem; font-weight: 700; color: var(--nx-ink); letter-spacing: -0.02em; }
.nx-tile--alert { border-color: #F0B98B; background: #FFFDFB; }
.nx-tile--alert .nx-tile__n { color: var(--nx-orange-dark); }

/* Encallats */
.nx-stuck-group + .nx-stuck-group { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--nx-line); }
.nx-stuck-group__title {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8125rem; font-weight: 600; color: var(--nx-ink); margin-bottom: .625rem;
}
.nx-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--stage, var(--nx-line)); flex-shrink: 0; }

.nx-stuck-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.nx-stuck-list li {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: .625rem .75rem; border-radius: .5rem; background: #FAF9F7;
  font-size: .875rem;
}

/* Últimes altes */
.nx-latest { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; }
.nx-latest + .nx-latest { border-top: 1px solid #F2F0ED; }
.min-w-0 { min-width: 0; }

/* ============================================================
   24. Historial de canvis
   ============================================================ */

.nx-log { list-style: none; padding: 0; margin: 0; }
.nx-log__item { display: flex; gap: .875rem; padding-bottom: 1rem; position: relative; }
.nx-log__item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 4px; top: 14px; bottom: 0;
  width: 2px; background: var(--nx-line);
}
.nx-log__dot {
  flex-shrink: 0;
  width: 10px; height: 10px; margin-top: 5px;
  border-radius: 50%;
  background: var(--nx-orange);
  position: relative; z-index: 1;
}
.nx-log__body { min-width: 0; flex: 1; }
.nx-log__field { font-size: .8125rem; font-weight: 600; color: var(--nx-ink); }
.nx-log__values { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; font-size: .8125rem; margin: .125rem 0; }
.nx-log__values i { color: var(--nx-muted); font-size: .9375rem; }
.nx-log__old { color: var(--nx-muted); text-decoration: line-through; }
.nx-log__new { color: var(--nx-ink); font-weight: 500; }
.nx-log__meta { font-size: .6875rem; color: var(--nx-muted); }

/* ============================================================
   25. Dashboard del client — semàfor
   ============================================================ */

.nx-dash { display: flex; flex-direction: column; gap: 1.5rem; }

/* --- Nivells: un sol lloc on tocar els colors --- */
.nx-verdict--good, .nx-light--good, .nx-tally--good {
  --lv: #1F7A4C; --lv-soft: #E7F5EE; --lv-line: #BFE5D2;
}
.nx-verdict--warn, .nx-light--warn, .nx-tally--warn {
  --lv: #A66A00; --lv-soft: #FDF3E0; --lv-line: #F6DCAE;
}
.nx-verdict--bad, .nx-light--bad, .nx-tally--bad {
  --lv: #B01458; --lv-soft: #FDE8F1; --lv-line: #F7BBD6;
}

/* --- El titular --- */
.nx-verdict {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding: 2rem 2.25rem;
  border-radius: 1.25rem;
  border: 1px solid var(--lv-line);
  background: linear-gradient(135deg, var(--lv-soft) 0%, #FFFFFF 78%);
  overflow: hidden;
}
.nx-verdict::after {
  content: '';
  position: absolute; right: -60px; top: -80px;
  width: 260px; height: 260px; border-radius: 50%;
  background: var(--lv); opacity: .05;
}
.nx-verdict__main { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.nx-verdict__eyebrow {
  margin: 0 0 .25rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--lv);
}
.nx-verdict__title {
  margin: 0 0 .5rem;
  font-size: clamp(1.5rem, 3.2vw, 2.125rem);
  font-weight: 800; line-height: 1.15; color: var(--nx-ink);
}
.nx-verdict__text {
  margin: 0 0 1rem; max-width: 46ch;
  font-size: 1rem; color: var(--nx-body);
}
.nx-verdict__year { position: relative; z-index: 1; }
.nx-verdict__year .form-select { min-width: 7rem; }

/* --- El marcador --- */
.nx-verdict__face { position: relative; flex-shrink: 0; width: 132px; height: 132px; }
.nx-dial { width: 132px; height: 132px; transform: rotate(-90deg); }
.nx-dial circle { fill: none; stroke-width: 11; stroke-linecap: round; }
.nx-dial__track { stroke: #FFFFFF; }
.nx-dial__fill {
  stroke: var(--lv);
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
  transition: stroke-dashoffset 1.2s cubic-bezier(.22, 1, .36, 1);
}
.is-ready .nx-dial__fill { stroke-dashoffset: calc(327 - (327 * var(--score) / 100)); }
.nx-dial__num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding-bottom: 1.25rem;
  font-size: 2.25rem; font-weight: 800; line-height: 1; color: var(--lv);
  font-variant-numeric: tabular-nums;
}
.nx-dial__cap {
  position: absolute; left: 0; right: 0; bottom: 36px;
  text-align: center; font-size: .6875rem; line-height: 1; color: var(--nx-muted);
}

/* --- Recompte --- */
.nx-verdict__tally { display: flex; gap: .5rem; flex-wrap: wrap; }
.nx-tally {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem; border-radius: 999px;
  background: #FFFFFF; border: 1px solid var(--lv-line);
  font-size: .8125rem; font-weight: 600; color: var(--nx-body);
}
.nx-tally i { width: 9px; height: 9px; border-radius: 50%; background: var(--lv); }

/* --- De cada 100 € --- */
.nx-split {
  display: flex; height: 46px; border-radius: .75rem; overflow: hidden;
  background: var(--nx-line);
}
.nx-split__seg {
  width: 0;
  display: flex; align-items: center; justify-content: center;
  color: #FFFFFF; font-size: .8125rem; font-weight: 700;
  transition: width 1s cubic-bezier(.22, 1, .36, 1);
}
.is-ready .nx-split__seg { width: var(--w); }
.nx-split__seg + .nx-split__seg { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .55); }

.nx-split__seg--production { background: #D15E14; }
.nx-split__seg--commercial { background: #ED7623; }
.nx-split__seg--personnel  { background: #F4A15C; }
.nx-split__seg--structure  { background: #E71D73; }
.nx-split__seg--other      { background: #A9A9A7; }
.nx-split__seg--left       { background: #1F7A4C; }

.nx-split__legend {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
}
.nx-split__legend li { display: flex; align-items: center; gap: .5rem; font-size: .875rem; }
.nx-split__legend strong { color: var(--nx-ink); font-variant-numeric: tabular-nums; }
.nx-split__legend span { color: var(--nx-muted); }
.nx-split__dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* --- Xifres grosses --- */
.nx-big { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.nx-big__item {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: 1rem;
  padding: 1.25rem 1.375rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.nx-big__item:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1.5rem rgba(29, 29, 27, .07); }
.nx-big__label {
  display: flex; align-items: center; gap: .45rem;
  font-size: .8125rem; font-weight: 600; color: var(--nx-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.nx-big__label i { font-size: 1.125rem; color: var(--nx-orange); }
.nx-big__value {
  margin: .5rem 0 .375rem;
  font-size: 1.875rem; font-weight: 800; line-height: 1; color: var(--nx-ink);
  font-variant-numeric: tabular-nums;
}
.nx-big__value small { font-size: 1rem; font-weight: 600; color: var(--nx-muted); margin-left: .2rem; }
.nx-big__item.is-neg .nx-big__value { color: #B01458; }
.nx-big__foot { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; font-size: .8125rem; color: var(--nx-muted); }
.nx-trend { display: inline-flex; align-items: center; gap: .15rem; font-weight: 700; }
.nx-trend.is-up   { color: #1F7A4C; }
.nx-trend.is-down { color: #B01458; }

/* --- Semàfors --- */
.nx-lights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.nx-light {
  position: relative;
  padding: 1.25rem;
  border-radius: 1rem;
  border: 1px solid var(--lv-line);
  background: var(--lv-soft);
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease, box-shadow .2s ease;
  transition-delay: calc(var(--i) * 60ms);
}
.is-ready .nx-light { opacity: 1; transform: none; }
.nx-light:hover { box-shadow: 0 .5rem 1.5rem rgba(29, 29, 27, .08); }
.nx-light__top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.nx-light__bulb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--lv); color: #FFFFFF; flex-shrink: 0;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--lv) 14%, transparent);
}
.nx-light__bulb i { font-size: 1.25rem; }
.nx-light__value {
  font-size: 1.125rem; font-weight: 800; color: var(--lv);
  font-variant-numeric: tabular-nums; text-align: right;
}
.nx-light__title { margin: .875rem 0 .25rem; font-size: 1rem; font-weight: 700; color: var(--nx-ink); }
.nx-light__note { margin: 0; font-size: .875rem; line-height: 1.45; color: var(--nx-body); }

/* --- Peu --- */
.nx-dash__more { display: flex; gap: .75rem; flex-wrap: wrap; }
.nx-dash__more .btn { display: inline-flex; align-items: center; gap: .45rem; }

/* --- Sense dades --- */
.nx-empty {
  max-width: 34rem; margin: 3rem auto; text-align: center;
}
.nx-empty__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--nx-orange-soft); color: var(--nx-orange);
  margin-bottom: 1.25rem;
}
.nx-empty__icon i { font-size: 2.25rem; }
.nx-empty__title { font-size: 1.5rem; font-weight: 800; color: var(--nx-ink); margin-bottom: .625rem; }
.nx-empty__text { color: var(--nx-body); margin-bottom: 1.5rem; }
.nx-empty .btn { display: inline-flex; align-items: center; gap: .5rem; }

@media (max-width: 1199.98px) {
  .nx-big    { grid-template-columns: repeat(2, 1fr); }
  .nx-lights { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
  .nx-verdict { padding: 1.5rem; }
  .nx-verdict__main { gap: 1.25rem; }
  .nx-big    { grid-template-columns: 1fr; }
  .nx-lights { grid-template-columns: 1fr; }
  .nx-split__legend { gap: .5rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nx-light { opacity: 1; transform: none; transition: none; }
  .nx-dial__fill, .nx-split__seg { transition: none; }
}

/* Estat final garantit: si la pestanya estava amagada, les transicions
   s'han quedat a mitges i aqui es tallen perque tot quedi al seu lloc. */
.nx-dash.is-settled .nx-light { opacity: 1; transform: none; }
.nx-dash.is-settled .nx-light,
.nx-dash.is-settled .nx-dial__fill,
.nx-dash.is-settled .nx-split__seg { transition: none; }

/* ============================================================
   26. Gràfics del semàfor
   ============================================================ */

.nx-light__more { margin-top: .875rem; }
.nx-light__more > summary {
  display: inline-flex; align-items: center; gap: .2rem;
  cursor: pointer; list-style: none;
  font-size: .8125rem; font-weight: 700; color: var(--lv);
  padding: .2rem 0;
}
.nx-light__more > summary::-webkit-details-marker { display: none; }
.nx-light__more > summary:hover { text-decoration: underline; }
.nx-light__more > summary i { font-size: 1.125rem; transition: transform .2s ease; }
.nx-light__more[open] > summary i { transform: rotate(180deg); }

.nx-light__more > .nx-chart,
.nx-light__more > .nx-scale {
  margin-top: .75rem; padding-top: .875rem;
  border-top: 1px solid var(--lv-line);
}

/* --- Barres comparatives --- */
.nx-chart { display: flex; flex-direction: column; gap: .4rem; font-size: .75rem; }
.nx-chart__row {
  display: grid;
  grid-template-columns: auto minmax(3rem, 1fr) auto;
  align-items: center;
  gap: .5rem;
}
.nx-chart__row .nx-chart__label { grid-area: 1 / 1; }
.nx-chart__row .nx-chart__track { grid-area: 1 / 2; }
.nx-chart__row .nx-chart__val   { grid-area: 1 / 3; }
.nx-chart__label { color: var(--nx-body); white-space: nowrap; }
.nx-chart__track {
  height: 9px; border-radius: 999px;
  background: rgba(29, 29, 27, .07);
  overflow: hidden;
}
.nx-chart__track i {
  display: block; height: 100%; width: var(--w); border-radius: 999px;
  animation: nx-grow .6s cubic-bezier(.22, 1, .36, 1) both;
}
.nx-chart__val { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

.nx-chart__track i.is-in,  .nx-chart__val.is-in  { color: #D15E14; }
.nx-chart__track i.is-out, .nx-chart__val.is-out { color: #B01458; }
.nx-chart__track i.is-pos, .nx-chart__val.is-pos { color: #1F7A4C; }
.nx-chart__track i.is-neg, .nx-chart__val.is-neg { color: #B01458; }
.nx-chart__track i { background: currentColor; }

@keyframes nx-grow { from { width: 0; } to { width: var(--w); } }

/* --- Escala amb zones --- */
.nx-scale { padding-top: 1.25rem; }
.nx-scale__track {
  position: relative;
  display: flex; height: 10px; border-radius: 999px; overflow: visible;
  margin-bottom: .35rem;
}
.nx-scale__zone { width: var(--w); height: 10px; }
.nx-scale__zone:first-child { border-radius: 999px 0 0 999px; }
.nx-scale__zone:last-child  { border-radius: 0 999px 999px 0; }
.nx-scale__zone.is-good { background: #7FC5A0; }
.nx-scale__zone.is-warn { background: #F3C46A; }
.nx-scale__zone.is-bad  { background: #F08FBB; }

.nx-scale__pin {
  position: absolute; top: -5px; left: var(--x);
  width: 4px; height: 20px; border-radius: 2px;
  background: var(--nx-ink);
  transform: translateX(-2px);
}
.nx-scale__pin b {
  position: absolute; bottom: calc(100% + 4px); left: 50%;
  transform: translateX(-50%);
  font-size: .75rem; font-weight: 800; color: var(--nx-ink);
  white-space: nowrap;
}
.nx-scale__key {
  margin: .75rem 0 0;
  font-size: .6875rem; line-height: 1.4; color: var(--nx-muted);
}

@media (prefers-reduced-motion: reduce) {
  .nx-chart__track i { animation: none; }
}

/* En pantalla estreta l'etiqueta no pot menjar-se la barra: passa a dalt. */
@media (max-width: 575.98px) {
  .nx-chart__row {
    grid-template-columns: 1fr auto;
    gap: .15rem .5rem;
  }
  .nx-chart__row .nx-chart__label { grid-area: 1 / 1; }
  .nx-chart__row .nx-chart__val   { grid-area: 1 / 2; }
  .nx-chart__row .nx-chart__track { grid-area: 2 / 1 / 3 / 3; }
}

/* ============================================================
   27. Llindars de valoració
   ============================================================ */

.nx-threshold {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; padding: 1rem 0;
}
.nx-threshold + .nx-threshold { border-top: 1px solid var(--nx-line); }
.nx-threshold__text { min-width: 0; }
.nx-threshold__text .form-label { font-weight: 600; color: var(--nx-ink); }
.nx-threshold__field { flex-shrink: 0; width: 11rem; text-align: right; }
.nx-threshold__field small { display: block; margin-top: .25rem; font-size: .6875rem; }

.nx-pending { list-style: none; padding: 0; margin: 0; }
.nx-pending li { padding: .625rem 0; font-size: .8125rem; }
.nx-pending li + li { border-top: 1px solid var(--nx-line); }
.nx-pending strong { display: block; color: var(--nx-ink); }
.nx-pending span { color: var(--nx-muted); }

@media (max-width: 575.98px) {
  .nx-threshold { flex-direction: column; gap: .5rem; }
  .nx-threshold__field { width: 100%; text-align: left; }
}

/* ============================================================
   28. Període de les dades
   ============================================================ */

/* Distintiu de dades parcials: ha de saltar a la vista */
.nx-partial {
  display: inline-block;
  margin-left: .4rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: #FDF3E0;
  border: 1px solid #F6DCAE;
  font-size: .6875rem; font-weight: 700; letter-spacing: 0;
  text-transform: none; color: #A66A00;
  vertical-align: middle;
}

.nx-period {
  display: inline-block; margin-left: .5rem;
  font-size: .875rem; font-weight: 600; color: var(--nx-body);
}

.nx-note {
  display: flex; align-items: flex-start; gap: .5rem;
  margin: 0;
  padding: .75rem 1rem;
  border-radius: .75rem;
  background: #FDF3E0;
  border: 1px solid #F6DCAE;
  font-size: .8125rem; color: #7A4E00;
}
.nx-note i { font-size: 1.125rem; flex-shrink: 0; }

/* Tira dels dotze mesos: es veu d'un cop d'ull fins on arriben les dades */
.nx-strip { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; margin-top: 1rem; }
.nx-strip__months { display: flex; gap: 3px; }
.nx-strip__m {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 22px;
  border-radius: 4px;
  background: rgba(29, 29, 27, .07);
  color: var(--nx-muted);
  font-size: .625rem; font-weight: 700; line-height: 1;
}
.nx-strip__m.is-on { background: var(--nx-orange); color: #FFFFFF; }
.nx-strip.is-partial .nx-strip__m.is-on { background: #A66A00; }
.nx-strip__caption { font-size: .75rem; font-weight: 600; color: var(--nx-muted); }
.nx-strip.is-partial .nx-strip__caption { color: #A66A00; }

@media (max-width: 419.98px) {
  .nx-strip__m { width: 16px; height: 20px; font-size: .5625rem; }
}

/* ============================================================
   29. Fitxa d'usuari a l'administració
   ============================================================ */

.nx-userhead { display: flex; align-items: center; gap: .75rem; }
.nx-userhead__img,
.nx-userhead__initials {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover;
}
.nx-userhead__initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--nx-orange-soft); color: var(--nx-orange-dark);
  font-weight: 700; font-size: 1rem;
}

/* Llista de dades: etiqueta a dalt, valor a sota */
.nx-facts { margin: 0; }
.nx-facts dt {
  font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--nx-muted);
  margin-top: .875rem;
}
.nx-facts dt:first-child { margin-top: 0; }
.nx-facts dd { margin: .125rem 0 0; font-size: .875rem; color: var(--nx-ink); }
.nx-facts__sub {
  font-size: .8125rem; font-weight: 700; color: var(--nx-ink);
  margin: 1.25rem 0 .5rem;
}
.nx-facts__sub:first-of-type { margin-top: 0; }

.nx-facts__counters { display: flex; gap: 1rem; flex-wrap: wrap; }
.nx-counter {
  flex: 1 1 8rem;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .75rem .875rem;
  border: 1px solid var(--nx-line); border-radius: .75rem;
  background: var(--nx-canvas);
}
.nx-counter i { font-size: 1.25rem; color: var(--nx-orange); }
.nx-counter strong { font-size: 1.25rem; color: var(--nx-ink); line-height: 1; }
.nx-counter span { font-size: .75rem; color: var(--nx-muted); flex-basis: 100%; }

/* Rastre: fitxer / detall / data */
.nx-trace { list-style: none; margin: 0 0 .5rem; padding: 0; }
.nx-trace li {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  padding: .5rem 0; font-size: .8125rem;
}
.nx-trace li + li { border-top: 1px solid #F2F0ED; }
.nx-trace li > :first-child { font-weight: 600; color: var(--nx-ink); }
.nx-trace li > span:not(:first-child) { color: var(--nx-muted); }
.nx-trace time { margin-left: auto; color: var(--nx-muted); font-size: .75rem; white-space: nowrap; }
.nx-trace .badge { font-size: .625rem; }

/* Què hi ha per fer, a dalt de la llista de volcats */
.nx-todo { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.nx-todo__card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'icon n' 'icon label' 'hint hint';
  align-items: center;
  gap: .125rem .75rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--nx-line);
  border-radius: 1rem;
  background: var(--nx-surface);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
a.nx-todo__card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.5rem rgba(29, 29, 27, .08); }
.nx-todo__icon {
  grid-area: icon;
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--nx-canvas); color: var(--nx-muted);
}
.nx-todo__icon i { font-size: 1.375rem; }
.nx-todo__n { grid-area: n; font-size: 1.75rem; font-weight: 800; line-height: 1; color: var(--nx-ink); }
.nx-todo__label { grid-area: label; font-size: .8125rem; color: var(--nx-body); }
.nx-todo__hint { grid-area: hint; margin-top: .625rem; font-size: .75rem; color: var(--nx-muted); }

.nx-todo__card.is-urgent { border-color: #F6DCAE; background: #FFFDF8; }
.nx-todo__card.is-urgent .nx-todo__icon { background: #FDF3E0; color: #A66A00; }
.nx-todo__card.is-urgent .nx-todo__n { color: #A66A00; }
.nx-todo__card.is-clear .nx-todo__icon { background: #E7F5EE; color: #1F7A4C; }
.nx-todo__card.is-warn .nx-todo__icon { background: var(--nx-magenta-soft); color: #B01458; }
.nx-todo__card.is-warn .nx-todo__n { color: #B01458; }

@media (max-width: 991.98px) { .nx-todo { grid-template-columns: 1fr; } }

/* Caixa de l'informe a la revisió */
.nx-review__figures {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-bottom: 1.25rem;
}
.nx-review__figures > div {
  flex: 1 1 8rem;
  padding: .625rem .875rem;
  border: 1px solid var(--nx-line); border-radius: .75rem;
  background: var(--nx-canvas);
}
.nx-review__figures span {
  display: block; font-size: .6875rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--nx-muted);
}
.nx-review__figures strong {
  font-size: 1.0625rem; color: var(--nx-ink); font-variant-numeric: tabular-nums;
}
.nx-review__text {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8125rem; line-height: 1.7;
}

.nx-empty__icon--wait { background: #FDF3E0; color: #A66A00; }

/* Memòria entre volcats: què ja teníem i què és nou */
.nx-memory {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--nx-line);
  background: var(--nx-canvas);
  font-size: .8125rem;
}
.nx-memory__item { display: inline-flex; align-items: center; gap: .35rem; color: var(--nx-body); }
.nx-memory__item i { font-size: 1.125rem; }
.nx-memory__item strong { font-size: 1rem; }
.nx-memory__item.is-new i, .nx-memory__item.is-new strong { color: #B01458; }
.nx-memory__item.is-known i, .nx-memory__item.is-known strong { color: #1F7A4C; }
.nx-memory__hint { color: var(--nx-muted); font-size: .75rem; flex: 1 1 16rem; }

/* La fila nova crida l'atenció; la coneguda s'aparta */
.nx-map-row.is-new > td:first-child { box-shadow: inset 3px 0 0 #E71D73; }
.nx-map-row.is-new { background: #FFF9FC; }
.nx-map-row.is-known code,
.nx-map-row.is-known .small { opacity: .75; }
.nx-map-row__mark { color: #1F7A4C; font-size: 1.125rem; vertical-align: -2px; }

/* Volcat amb un format que no sabem llegir */
.nx-unknown { border-color: #F7BBD6; background: #FFFAFC; }
.nx-unknown__head { display: flex; align-items: flex-start; gap: 1rem; }
.nx-unknown__icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: var(--nx-magenta-soft); color: #B01458;
}
.nx-unknown__icon i { font-size: 1.5rem; }
.nx-unknown__hint {
  margin: 1rem 0;
  font-size: .8125rem; color: var(--nx-body);
}