/* Cobertis · Dashboards — estil comú de les apps de Cobertis (referència: Cobertis Comercial / BO) */
:root {
  --dark: #3d4952;
  --dark-2: #5a6570;
  --red: #c8102e;
  --red-hover: #a50d25;
  --bg: #f3f5f9;
  --surface: #ffffff;
  --fg: #333333;
  --muted: #9a9ea3;
  --muted-2: #6b7580;
  --line: #e1e5eb;
  --line-soft: #f0f0f0;
  --pos: #28a745;
  --neg: #dc3545;
  --warn: #e0a800;
  --info: #17a2b8;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 4px 12px rgba(61, 73, 82, .12);
  --shadow-lg: 0 8px 24px rgba(61, 73, 82, .16);
  --transition: all .3s cubic-bezier(.4, 0, .2, 1);
  /* Paleta de gràfics (validada per daltonisme: ΔE adjacent ≥ 11,5). Ordre fix: no es cicla mai.
     L'any en curs sempre és --c1 (vermell Cobertis suavitzat); els anys anteriors, grisos freds. */
  --c1: #0b6bcb; --c2: #e8743b; --c3: #19a979; --c4: #9a5fd0; --c5: #d4567f; --c6: #c98a1c;
  /* Anys (ordinal, un sol to validat): any en curs blau marí, l'anterior blau clar, el de fa dos anys gris */
  --any0: #0b5cad; --ant: #86b6ef; --ant2: #d5dce5; --altres: #dfe4ea;
  --puja: #2e844a; --baixa: #c23934;
  --graella: #edf0f4; --eix: #7d8794;
  --pos: #2e844a; --neg: #c23934;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body { font: 14px/1.5 "Poppins", "Helvetica", "Arial", sans-serif; -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
a { color: var(--red); }
button, input, select, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: .75rem; }

/* ── Capçalera (estil BO) ─────────────────────────────────────────────────── */
.capcalera { position: sticky; top: 0; z-index: 100; background: var(--dark); box-shadow: var(--shadow-md);
  padding: 14px 24px; padding-top: max(14px, env(safe-area-inset-top)); }
.capcalera-in { max-width: 1800px; margin: 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.marca img { height: 48px; width: auto; filter: brightness(0) invert(1); display: block; }
.nom-app { padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .9);
  font-size: .9375rem; font-weight: 500; white-space: nowrap; }
.capcalera .spacer { flex: 1; }
.btn-top { height: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 10px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .15); color: #fff;
  font-size: .9375rem; font-weight: 500; cursor: pointer; text-decoration: none; transition: var(--transition); }
.btn-top:hover { background: rgba(255, 255, 255, .12); }
.capcalera select { height: 42px; border-radius: 10px; background: rgba(255, 255, 255, .06); color: #fff;
  border: 1px solid rgba(255, 255, 255, .15); padding: 0 12px; max-width: 320px; }
.capcalera select option { color: var(--fg); }
.user-chip { height: 42px; display: inline-flex; align-items: center; gap: 10px; padding: 0 14px 0 8px; border-radius: 10px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .15); color: #fff; font-size: .875rem; font-weight: 600; }
.user-chip .av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--red) 0%, #a00d25 100%); color: #fff; font-weight: 700; font-size: .8125rem; text-transform: uppercase; }
@media (max-width: 760px) {
  .capcalera { padding: 8px 10px; }
  .marca img { height: 32px; }
  .nom-app, .user-chip .em { display: none; }
  .btn-top { padding: 0 12px; font-size: .875rem; }
}

/* ── Peu (estil BO) ───────────────────────────────────────────────────────── */
.peu { max-width: 1800px; width: 100%; margin: 32px auto 0; padding: 16px 24px 24px; border-top: 1px solid var(--line);
  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; font-size: .75rem; color: var(--muted); }
.peu .sep { color: var(--line); }

.wrap { max-width: 1800px; margin: 0 auto; padding: 24px 24px 16px; }
@media (max-width: 760px) { .wrap { padding: 16px; } }

/* ── Botons i formularis ──────────────────────────────────────────────────── */
a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.btn { border: 1.5px solid var(--line); background: var(--surface); color: var(--dark); border-radius: var(--radius-sm);
  padding: .5rem 1rem; cursor: pointer; font-size: .875rem; font-weight: 500; transition: var(--transition); }
.btn:hover { border-color: var(--dark); }
.btn.primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn.primary:hover { background: var(--red-hover); border-color: var(--red-hover); }
.btn .ico { width: 16px; height: 16px; flex: 0 0 16px; }
.btn { display: inline-flex; align-items: center; gap: 8px; }
.btn.danger { color: var(--red); }
.btn.danger:hover { border-color: var(--red); }
.btn.sm { padding: .375rem .75rem; font-size: .8125rem; }
.btn:disabled { background: #ccc; border-color: #ccc; color: #999; cursor: default; transform: none; box-shadow: none; }
label.f { display: flex; flex-direction: column; gap: .375rem; font-size: .8125rem; font-weight: 500; color: var(--dark); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=month], select, textarea {
  border: 1.5px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); padding: .6rem .875rem;
  font-size: .875rem; min-width: 0; transition: border-color .2s, box-shadow .2s;
}
input:hover, select:hover, textarea:hover { border-color: var(--dark); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--dark); box-shadow: 0 0 0 3px rgba(61, 73, 82, .1); }
.capcalera select:focus { box-shadow: none; border-color: rgba(255, 255, 255, .4); }

/* Avisos */
.msg { padding: .75rem; border-radius: var(--radius-sm); background: #e5f6fd; color: #014361; font-size: .875rem; border-left: 3px solid var(--info); }
.msg.err { background: #fee; color: var(--red); border-left-color: var(--red); }
.msg.ok { background: #e8f5e9; color: #1e7e34; border-left-color: var(--pos); }

/* ── Login (rèplica del LoginForm de les apps Cobertis) ──────────────────── */
.pantalla-login { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 200;
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%); overflow: auto; padding: 24px 0 64px; }
.pantalla-login::before { content: ""; position: absolute; inset: 0; opacity: .03; pointer-events: none;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255, 255, 255, .1) 35px, rgba(255, 255, 255, .1) 70px); }
.caixa-login { background: #fff; border-radius: var(--radius-lg); padding: 3rem 2.5rem; width: 90%; max-width: 440px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3); position: relative; z-index: 1; margin: auto; }
@media (max-width: 600px) { .caixa-login { padding: 2rem 1.5rem; } }
.caixa-login .logo { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto 1.5rem; }
.caixa-login h2 { font-size: 1.5rem; color: var(--dark); font-weight: 600; text-align: center; margin: 0 0 .5rem; }
.caixa-login .subt { color: var(--muted); font-size: .875rem; text-align: center; margin-bottom: 2rem; }
.caixa-login form { display: flex; flex-direction: column; gap: 1rem; }
.caixa-login input { width: 100%; padding: .75rem 1rem; }
.boto-vermell { width: 100%; margin-top: .5rem; padding: .7rem 1.25rem; border-radius: var(--radius-sm); border: 0;
  font-size: .875rem; font-weight: 500; color: #fff; background: var(--red); cursor: pointer; transition: var(--transition); }
.boto-vermell:hover { background: var(--red-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.boto-vermell:disabled { background: #ccc; color: #999; transform: none; box-shadow: none; cursor: default; }
.camp-clau { position: relative; display: block; }
.camp-clau input { padding-right: 42px; }
.camp-clau .ull { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0;
  cursor: pointer; color: var(--muted); font-size: 16px; padding: 4px; }
.link-muted, .link-red { display: block; text-align: center; cursor: pointer; text-decoration: none; }
.link-muted { margin-top: 1rem; color: var(--muted); font-size: .8125rem; }
.link-red { margin-top: .75rem; color: var(--red); font-size: .875rem; font-weight: 500; }
.link-muted:hover, .link-red:hover { text-decoration: underline; }
.caixa-pendent .msg { margin-bottom: .5rem; }
.caixa-login .ajuda { text-align: center; color: var(--muted); font-size: .8125rem; margin-top: 1rem; }
.peu-login { position: fixed; bottom: 1.5rem; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .7); font-size: .75rem; z-index: 1; }

/* ── Dashboard ────────────────────────────────────────────────────────────── */
.hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.eyebrow { text-transform: uppercase; letter-spacing: .05em; font-size: .6875rem; font-weight: 700; color: var(--red); }
.hero h1 { margin: 4px 0 2px; font-size: 1.75rem; line-height: 1.2; font-weight: 700; color: var(--dark); }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.card { background: var(--surface); border: 1px solid #e3e8ef; border-radius: 16px; box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
  padding: 20px; min-width: 0; transition: box-shadow .2s; }
/* Les targetes del dashboard no «salten» en passar-hi el ratolí: són dades, no botons */
.card h3 { margin: 0 0 14px; font-size: .9375rem; font-weight: 600; color: var(--dark); }
/* Peu de cada component (estil Salesforce): període a l'esquerra, data de les dades a la dreta */
.card-peu { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line-soft);
  font-size: .6875rem; color: var(--muted); }
/* Capçalera de pàgina (estil Salesforce): icona, etiqueta, títol, dates i accions */
.cap-pag { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--surface); border: 1px solid #e3e8ef; border-radius: 16px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .06); padding: 16px 20px; margin-bottom: 16px; }
.cap-ico { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: var(--red); color: #fff; display: grid; place-items: center; }
.cap-ico .ico { width: 24px; height: 24px; }
.cap-txt { flex: 1; min-width: 220px; }
.cap-eyebrow { font-size: .75rem; color: var(--muted-2); }
.cap-txt h1 { margin: 1px 0 2px; font-size: 1.375rem; line-height: 1.25; font-weight: 600; color: var(--dark); letter-spacing: -.01em; }
.cap-sub { font-size: .8125rem; color: var(--muted-2); }
.cap-accions { display: flex; gap: 8px; flex-wrap: wrap; }
.card h3 .muted { font-weight: 400; font-size: .875rem; }
.span-12 { grid-column: span 12; } .span-6 { grid-column: span 6; } .span-4 { grid-column: span 4; } .span-3 { grid-column: span 3; }
@media (max-width: 1100px) { .span-3 { grid-column: span 6; } }
@media (max-width: 860px) { .span-6, .span-4, .span-3 { grid-column: span 12; } }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; grid-column: span 12; }
.kpi { background: var(--surface); border: 1px solid #e3e8ef; border-radius: 16px; padding: 16px 18px; box-shadow: 0 1px 3px rgba(16, 24, 40, .06); }
.kpi .l { font-size: .8125rem; font-weight: 500; color: var(--muted-2); }
.kpi .v { font-size: 1.625rem; font-weight: 600; color: var(--dark); margin: 6px 0 8px; letter-spacing: -.01em; }
.kpi .d { font-size: .75rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Variació en «pastilla» suau: fletxa + percentatge (mai només el color) */
.delta { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; font-weight: 600; font-variant-numeric: tabular-nums; }
.delta.pos { background: #e9f5ef; } .delta.neg { background: #fbecee; } .delta.muted { background: var(--bg); }
.card .kpi { box-shadow: none; }
.pos { color: var(--pos); } .neg { color: var(--neg); }
.chart-box { position: relative; height: 280px; }
.chart-box.tall { height: 360px; }

table.t { width: 100%; border-collapse: collapse; font-size: .8125rem; font-variant-numeric: tabular-nums; }
table.t th, table.t td { padding: .75rem; border-bottom: 1px solid var(--line-soft); text-align: right; white-space: nowrap; }
table.t th:first-child, table.t td:first-child { text-align: left; white-space: normal; }
table.t th { font-weight: 600; font-size: .6875rem; text-transform: uppercase; letter-spacing: .5px; color: var(--dark);
  background: var(--bg); border-bottom: 2px solid var(--line); cursor: pointer; user-select: none; position: sticky; top: 0; }
table.t tbody tr:hover td { background: #f8f9fb; }
table.t tr:last-child td { border-bottom: 0; }
table.t tr.tot td { font-weight: 700; color: var(--dark); border-top: 2px solid var(--line); background: var(--bg); }
.scroll { overflow: auto; max-height: 460px; }

/* Columna d'altres ingressos (fora de cartera) */
table.t th.altres { background: #fde2e6; }
table.t td.altres { background: #fef2f4; }

/* ── Administració ────────────────────────────────────────────────────────── */
  border-bottom: 2px solid transparent; transition: color .2s; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .spacer { flex: 1; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--bg); color: var(--muted-2); }
.badge.ok { background: #e8f5e9; color: #1e7e34; } .badge.warn { background: #fff8e1; color: #8a6d00; }
.badge.off { background: #f1f2f4; color: var(--muted); }
.badge.ext { background: #e5f6fd; color: #014361; } .badge.int { background: #ede7f6; color: #5e35b1; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow-sm); }
.panel h3 { color: var(--dark); font-weight: 600; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px 4px 3px 12px; font-size: .8125rem; font-weight: 500;
  color: var(--dark); display: inline-flex; align-items: center; gap: 4px; }
.chip button { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 15px; line-height: 1; padding: 0 4px; }
.chip button:hover { color: var(--red); }
.results { border: 1px solid var(--line); border-radius: var(--radius-sm); max-height: 220px; overflow: auto; margin-top: 4px; background: var(--surface); box-shadow: var(--shadow-md); }
.results div { padding: 8px 12px; cursor: pointer; font-size: .8125rem; font-weight: 400; color: var(--fg); }
.results div:hover { background: var(--bg); }
.actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.note { font-size: .75rem; color: var(--muted); margin-top: 10px; }
.empty { padding: 40px; text-align: center; color: var(--muted); }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--dark); color: #fff;
  padding: 10px 18px; border-radius: var(--radius-sm); font-size: .875rem; z-index: 300; box-shadow: var(--shadow-lg); }
.panel, .card { scroll-margin-top: 90px; }

.kpis-titol { grid-column: span 12; margin: 4px 0 -4px; font-size: 1rem; font-weight: 600; color: var(--dark); }

/* ── Editor visual de plantilles ──────────────────────────────────────────── */
.pl-card { display: flex; flex-direction: column; }
.pl-card .toolbar { margin-top: auto !important; padding-top: 14px; }
.pl-mini { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-chip { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: .75rem; color: var(--dark); }
.ed-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ed-top .spacer { flex: 1; }
.ed-nom { font-size: 1.125rem !important; font-weight: 600; color: var(--dark); min-width: 260px; flex: 0 1 360px; }
.ed-desc { width: 100%; margin-bottom: 14px; }
.ed-mostra { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--muted-2); }
.ed-mostra select { max-width: 340px; }
.ed-cos { display: grid; grid-template-columns: 250px minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
.ed-paleta, .ed-props { position: sticky; top: 96px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 16px; max-height: calc(100vh - 120px); overflow: auto; }
.ed-tit { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-2); margin-bottom: 8px; }
.ed-mod { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1.5px dashed var(--line); border-radius: var(--radius-sm);
  margin-bottom: 8px; cursor: grab; background: var(--surface); transition: var(--transition); font-size: .8125rem; color: var(--dark); }
.ed-mod:hover { border-color: var(--red); background: #fef2f4; }
.ed-mod .small { font-size: .6875rem; line-height: 1.35; margin-top: 2px; }
.ed-ico { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; display: grid; place-items: center; background: var(--dark); color: #fff; font-size: 15px; }
.ed-llenc { background: #eef1f5; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; min-height: 420px; }
.ed-hero { margin-bottom: 14px; }
.ed-hero-nom { font-size: 1.25rem; font-weight: 700; color: var(--dark); }
.ed-item { position: relative; border: 2px solid transparent; border-radius: calc(var(--radius) + 4px); padding: 4px; background: transparent;
  cursor: pointer; transition: border-color .2s, background .2s; min-width: 0; }
.ed-item:hover { border-color: #c5cdd4; }
.ed-item.sel { border-color: var(--red); background: rgba(200, 16, 46, .04); }
.ed-bar { display: flex; align-items: center; gap: 6px; padding: 2px 6px 6px; font-size: .75rem; color: var(--muted-2); cursor: grab; user-select: none; }
.ed-bar .spacer { flex: 1; }
.ed-nomw { font-weight: 600; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-handle { font-size: 16px; color: var(--muted); }
.ed-btn { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; width: 26px; height: 24px; cursor: pointer; color: var(--muted-2); font-size: 13px; line-height: 1; }
.ed-btn:hover { color: var(--red); border-color: var(--red); }
.ed-prev { pointer-events: none; gap: 12px; }
.ed-prev .card:hover { box-shadow: var(--shadow-sm); }
.ed-nod { padding: 28px 16px; text-align: center; color: var(--muted); font-size: .8125rem; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); }
.ed-buit { padding: 60px 16px; text-align: center; color: var(--muted); border: 2px dashed #c5cdd4; border-radius: var(--radius); }
.ed-fantasma { opacity: .35; }
#eGrid .ed-mod { grid-column: span 12; }
.ed-props label.f { margin-bottom: 12px; }
.ed-checks { display: flex; flex-direction: column; gap: 6px; font-weight: 400; color: var(--fg); margin-top: 4px; }
.ed-checks label { display: flex; gap: 8px; align-items: center; font-size: .8125rem; }
.ed-seg { display: inline-flex; border: 1.5px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; margin-top: 4px; }
.ed-seg button { border: 0; background: var(--surface); padding: 6px 12px; cursor: pointer; font-size: .8125rem; color: var(--dark); }
.ed-seg button + button { border-left: 1px solid var(--line); }
.ed-seg button.on { background: var(--dark); color: #fff; }
.ed-ul { padding-left: 18px; margin: 0; } .ed-ul li { margin-bottom: 6px; }
@media (max-width: 1100px) {
  .ed-cos { grid-template-columns: 1fr; }
  .ed-paleta, .ed-props { position: static; max-height: none; }
  .ePal { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
  .ePal .ed-mod { margin: 0; }
}

/* ── Mòduls BI ────────────────────────────────────────────────────────────── */
.destacat { display: flex; flex-direction: column; }
.destacat h3 { font-size: .8125rem; font-weight: 500; color: var(--muted-2); margin-bottom: 6px; }
.dest-v { font-size: 2rem; font-weight: 600; color: var(--dark); line-height: 1.1; letter-spacing: -.015em; }
.dest-d { font-size: .75rem; margin: 8px 0 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dest-sp { position: relative; height: 56px; margin-top: auto; }
.gauge { position: relative; height: 170px; max-width: 340px; margin: 0 auto; }
.gauge-c { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; display: flex; flex-direction: column; }
.gauge-c b { font-size: 2rem; font-weight: 600; color: var(--dark); line-height: 1; }
.gauge-peu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; text-align: center; }
.gauge-peu > div { display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
.gauge-peu b { color: var(--dark); }
.toplist { list-style: none; margin: 0; padding: 0; }
.toplist li { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.toplist li:last-child { border-bottom: 0; }
.tl-n { width: 24px; flex: 0 0 24px; color: var(--muted); font-weight: 600; font-size: .75rem; text-align: right; font-variant-numeric: tabular-nums; }
.toplist li:nth-child(-n+3) .tl-n { color: var(--dark); }
.tl-c { flex: 1; min-width: 0; }
.tl-f { display: flex; gap: 10px; align-items: baseline; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.tl-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dark); font-weight: 500; }
.tl-v { width: 62px; text-align: right; font-size: .75rem; }
.tl-b { height: 6px; background: var(--graella); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.tl-b span { display: block; height: 100%; background: var(--any0); border-radius: 3px; }
table.calor-t { table-layout: fixed; min-width: 640px; }
table.calor-t td { text-align: center; font-size: .6875rem; padding: .55rem .15rem; border: 2px solid var(--surface); border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.calor-t th { text-align: center; padding: .6rem .15rem; }
table.calor-t th:first-child, table.calor-t td:first-child { width: 52px; }
table.calor-t th:last-child, table.calor-t td:last-child { width: 72px; }
table.calor-t tbody tr:hover td { filter: brightness(.97); }
.text-mod { background: #fbfcfd; border-left: 3px solid var(--dark); }
.text-cos { font-size: .875rem; line-height: 1.6; color: var(--fg); }
.ed-cat { font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--red); margin: 14px 0 6px; }
.ed-paleta .ed-cat:first-of-type { margin-top: 4px; }
.ed-paleta .ed-mod .small { display: none; }
.ed-paleta .ed-mod { padding: 8px 10px; align-items: center; margin-bottom: 6px; }
.ed-chk { display: flex; gap: 8px; align-items: center; font-size: .8125rem; margin: 4px 0 12px; color: var(--dark); }
.ed-props textarea { width: 100%; resize: vertical; }

/* ── Informe PDF (contenidor fora de pantalla que es captura) ─────────────── */
.hero-dreta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pdf-fulla { position: fixed; left: -30000px; top: 0; background: var(--bg); padding: 24px 28px; z-index: -1; }
.pdf-fulla .scroll { max-height: none; overflow: visible; }
.pdf-fulla .card, .pdf-fulla .kpi { box-shadow: none; }
.pdf-cap { display: flex; align-items: center; gap: 28px; background: #fff; border-radius: var(--radius); padding: 18px 24px; margin-bottom: 18px;
  border: 1px solid var(--line); border-top: 4px solid var(--red); }
.pdf-cap img { width: 190px; height: auto; }
.pdf-cap-t { flex: 1; border-left: 1px solid var(--line); padding-left: 24px; }
.pdf-cap-t h1 { margin: 2px 0; font-size: 1.6rem; color: var(--dark); }
.pdf-cap-d { text-align: right; }
.pdf-cap-d b { color: var(--dark); font-size: .875rem; }

/* ── Versions i arquitectura ──────────────────────────────────────────────── */
.peu a { color: inherit; text-decoration: none; } .peu a:hover { color: var(--red); }
.sec-tit { font-size: 1.125rem; font-weight: 700; color: var(--dark); margin: 28px 0 12px; }
.versio-actual { border-top: 3px solid var(--red); }
.versio-n { font-size: 2.6rem; font-weight: 700; color: var(--dark); line-height: 1.1; margin: 4px 0; }
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl-entrada { position: relative; margin-bottom: 14px; }
.tl-punt { position: absolute; left: -24px; top: 22px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--muted); }
.tl-entrada.actual .tl-punt { border-color: var(--red); }
.tl-cap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--dark); }
.tl-cap .spacer { flex: 1; }
.tl-ver { font-weight: 700; color: var(--red); font-variant-numeric: tabular-nums; }
.tl-items { margin: 10px 0 0; padding-left: 0; list-style: none; }
.tl-items li { margin: 6px 0; font-size: .875rem; line-height: 1.5; }
.tl-items .badge { min-width: 84px; text-align: center; margin-right: 6px; }
.arq .card.span-12 { margin-bottom: 4px; }
.arq-svg { width: 100%; height: auto; max-height: 360px; display: block; margin: 4px 0 8px; }
table.arq-t td, table.arq-t th { white-space: normal; text-align: left; vertical-align: top; }
code { font-family: ui-monospace, Menlo, monospace; font-size: .8125em; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; color: var(--dark); }

/* ── Objectius de companyia ───────────────────────────────────────────────── */
.obj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.obj { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.obj-cap { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; color: var(--dark); font-size: .875rem; }
.obj-v { font-size: 1.375rem; font-weight: 700; color: var(--dark); font-variant-numeric: tabular-nums; }
.obj-v .muted { font-size: .8125rem; font-weight: 500; }
.obj-barra { position: relative; height: 6px; background: var(--graella); border-radius: 3px; }
.obj-barra span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--muted); }
.obj-ok .obj-barra span, .obj-assolit .obj-barra span { background: var(--puja); } .obj-risc .obj-barra span { background: var(--c4); }
.obj-baix .obj-barra span { background: var(--baixa); }
.obj-barra i { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--dark); }
.obj-det { font-size: .75rem; color: var(--muted-2); line-height: 1.5; }
.obj-excl { font-size: .6875rem; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge.err { background: #fee; color: var(--red); }
.obj-ed { border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: var(--radius-sm); padding: 14px; margin-top: 14px; background: #fcfcfd; }
.peu a[data-versio]:not([href]) { cursor: default; } .peu a[data-versio]:not([href]):hover { color: inherit; }

/* ── Avís de versió nova ──────────────────────────────────────────────────── */
.avis-versio { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 400; width: min(640px, calc(100% - 32px));
  display: flex; align-items: center; gap: 14px; background: var(--dark); color: #fff; border-radius: var(--radius); padding: 14px 16px;
  box-shadow: var(--shadow-lg); border-left: 4px solid var(--red); font-size: .875rem; animation: avPuja .3s ease-out; }
.avis-versio > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.avis-versio span:not(.av-ico) { color: rgba(255, 255, 255, .8); font-size: .8125rem; }
.avis-versio .av-ico { font-size: 22px; }
.avis-versio .boto-vermell { width: auto; margin: 0; white-space: nowrap; }
@keyframes avPuja { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 560px) { .avis-versio { flex-wrap: wrap; } .avis-versio .boto-vermell { width: 100%; } }

/* ── Administració: navegació lateral ─────────────────────────────────────── */
.adm { max-width: 1800px; margin: 0 auto; padding: 24px; display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 24px; align-items: start; }
.adm-nav { position: sticky; top: 96px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 14px 10px; }
.adm-sec { font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 12px 10px 6px; }
.adm-sec:first-child { padding-top: 2px; }
.adm-item { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: none; cursor: pointer; text-align: left;
  padding: 9px 10px; border-radius: var(--radius-sm); color: var(--muted-2); font-size: .875rem; font-weight: 500; position: relative; transition: background .15s, color .15s; }
.adm-item:hover { background: var(--bg); color: var(--dark); }
.adm-item.on { background: #fef2f4; color: var(--red); font-weight: 600; }
.adm-item.on::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--red); }
.adm-item span { flex: 1; }
.adm-item em { font-style: normal; font-size: .6875rem; font-weight: 700; background: var(--bg); color: var(--muted-2); border-radius: 999px; padding: 1px 8px; }
.adm-item.on em { background: #fde2e6; color: var(--red); }
.adm-item .punt { width: 8px; height: 8px; border-radius: 50%; background: var(--pos); } .adm-item .punt.err { background: var(--red); }
.adm-rol { border-top: 1px solid var(--line); margin-top: 12px; padding: 12px 10px 2px; }
.adm-main { min-width: 0; }
.adm-cap { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 18px 22px; margin-bottom: 18px; border-left: 4px solid var(--red); }
.adm-cap > div:nth-child(2) { flex: 1; }
.adm-cap h1 { margin: 0; font-size: 1.375rem; color: var(--dark); font-weight: 700; }
.adm-cap p { margin: 2px 0 0; color: var(--muted-2); font-size: .8125rem; }
.adm-ico { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; display: grid; place-items: center; background: var(--dark); color: #fff; }
.adm-ico svg { width: 22px; height: 22px; }
.adm.ed-obert { grid-template-columns: minmax(0, 1fr); }
.adm.ed-obert .adm-nav, .adm.ed-obert .adm-cap { display: none; }
@media (max-width: 900px) {
  .adm { grid-template-columns: 1fr; padding: 16px; }
  .adm-nav { position: static; display: flex; gap: 6px; overflow-x: auto; padding: 8px; }
  .adm-sec, .adm-rol { display: none; }
  .adm-item { width: auto; white-space: nowrap; }
  .adm-item.on::before { display: none; }
}

/* Usuaris: xips de filtre, persona i rols */
.xips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.xip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 14px; font-size: .8125rem; color: var(--muted-2); cursor: pointer; }
.xip b { color: var(--dark); margin-right: 2px; }
.xip.on { background: var(--dark); border-color: var(--dark); color: #fff; } .xip.on b { color: #fff; }
.xip.info { background: #fff8e1; border-color: #f4dfa0; color: #8a6d00; cursor: default; }
.persona { display: flex; align-items: center; gap: 10px; }
.av-p { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--dark); font-weight: 700; border: 1px solid var(--line); }
.badge.rol-admin { background: #fde2e6; color: var(--red); } .badge.rol-editor { background: #ede7f6; color: #5e35b1; } .badge.rol-lector { background: #e5f6fd; color: #014361; }
.fitxa { border-top: 4px solid var(--red); }
.fitxa-cap { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; } .fitxa-cap h3 { margin: 0; }
.seccio { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-top: 16px; background: #fcfcfd; }
.seccio-cap { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; cursor: pointer; }
.seccio-cap > span { display: flex; flex-direction: column; } .seccio-cap b { color: var(--dark); }
.seccio-cap input { margin-top: 4px; }
.rols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.rol { display: flex; flex-direction: column; gap: 4px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer; background: var(--surface); }
.rol input { display: none; } .rol b { color: var(--dark); font-size: .875rem; }
.rol.on { border-color: var(--red); background: #fef2f4; }
.rols.bloquejat .rol { cursor: default; opacity: .7; }

/* Diversos dashboards per usuari */
.n-dash { display: inline-block; font-size: .6875rem; font-weight: 700; color: var(--red); background: #fef2f4; border-radius: 999px; padding: 1px 8px; margin-bottom: 4px; }
.dash-llista { list-style: none; margin: 0; padding: 0; }
.dash-llista li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 3px 0; border-bottom: 1px dashed var(--line-soft); font-size: .8125rem; }
.dash-llista li:last-child { border-bottom: 0; }
.dash-llista .veure { font-size: .75rem; color: var(--red); text-decoration: none; white-space: nowrap; font-weight: 600; }
.dash-llista .veure:hover { text-decoration: underline; }
.dash-fila { display: grid; grid-template-columns: 28px minmax(150px, 1fr) minmax(200px, 1.6fr) minmax(170px, 1fr) auto; gap: 12px; align-items: end;
  padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); margin-top: 10px; }
.dash-n { width: 26px; height: 26px; border-radius: 50%; background: var(--dark); color: #fff; display: grid; place-items: center; font-size: .75rem; font-weight: 700; margin-bottom: 8px; }
.dash-ent { padding: .6rem 0; }
.dash-acc { display: flex; gap: 6px; margin-bottom: 4px; }
.dash-avis { grid-column: 2 / -1; margin: 0; }
.dash-fila .results { position: absolute; z-index: 20; width: 320px; }
.dash-fila .f { position: relative; }
.dash-buit { padding: 14px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius-sm); font-size: .8125rem; }
@media (max-width: 900px) { .dash-fila { grid-template-columns: 28px 1fr; } .dash-fila > .f, .dash-acc { grid-column: 2; } }

/* Enllaços del login com a botons (accessibles amb el teclat) */
button.link-muted, button.link-red { background: none; border: 0; width: 100%; font: inherit; padding: 0; }
button.link-muted { font-size: .8125rem; } button.link-red { font-size: .875rem; font-weight: 500; }

/* Assistent de plantilles (llenguatge natural) */
.ed-ia { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 10px 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.ed-ia:focus-within { border-color: var(--red); }
.ed-ia-ico { display: grid; place-items: center; height: 32px; color: var(--muted-2); }
.ed-ia-ico .ico, .cost-ia-ico .ico { width: 16px; height: 16px; }
.cost-ia-ico { display: inline-grid; place-items: center; opacity: .8; }
.ed-ia textarea { flex: 1; border: 0; outline: 0; resize: none; font: inherit; font-size: .875rem; line-height: 1.45; padding: 6px 0; background: transparent; color: var(--fg); min-height: 32px; }
.ed-ia textarea:disabled { opacity: .6; }
.ed-ia .btn { align-self: center; white-space: nowrap; }
.ed-ia-res { margin-bottom: 12px; }
.ed-ia-res .btn { margin-left: 6px; }
@media (max-width: 640px) { .ed-ia { flex-wrap: wrap; } .ed-ia .btn { width: 100%; } }

/* Pregunta al dashboard: panell lateral */
.hero-botons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.xat { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 60; display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg); transform: translateX(100%);
  transition: transform .25s cubic-bezier(.4, 0, .2, 1); visibility: hidden; }
.xat.obert { transform: none; visibility: visible; }
body.xat-obert main { margin-right: min(420px, 100vw); transition: margin .25s; }
@media (max-width: 900px) { body.xat-obert main { margin-right: 0; } }
.xat-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; color: #fff;
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%); }
.xat-tit { font-weight: 600; font-size: 1rem; }
.xat-sub { font-size: .75rem; opacity: .8; margin-top: 2px; }
.xat-tanca { background: rgba(255, 255, 255, .12); border: 0; color: #fff; width: 32px; height: 32px; border-radius: 50%; font-size: 1.25rem; cursor: pointer; }
.xat-tanca:hover { background: rgba(255, 255, 255, .25); }
.xat-cos { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; background: var(--bg); }
.xat-buit p { color: var(--muted-2); font-size: .875rem; margin: 0 0 12px; }
.xat-sug { display: flex; flex-direction: column; gap: 8px; }
.xat-chip { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 12px;
  font: inherit; font-size: .8125rem; color: var(--dark); cursor: pointer; transition: var(--transition); }
.xat-chip:hover { border-color: var(--red); color: var(--red); }
.xat-msg { max-width: 92%; padding: 10px 13px; border-radius: 14px; font-size: .875rem; line-height: 1.5; word-wrap: break-word; }
.xat-msg p { margin: 0 0 8px; } .xat-msg p:last-child { margin: 0; }
.xat-msg ul { margin: 0 0 8px; padding-left: 18px; } .xat-msg ul:last-child { margin-bottom: 0; } .xat-msg li { margin: 2px 0; }
.xat-msg.jo { align-self: flex-end; background: var(--red); color: #fff; border-bottom-right-radius: 4px; white-space: pre-wrap; }
.xat-msg.ia { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); color: var(--fg); border-bottom-left-radius: 4px; }
.xat-msg.err { align-self: flex-start; background: #fee; color: var(--red); border: 1px solid #f5c2c7; }
.xat-msg.pensant { display: flex; gap: 4px; padding: 14px 16px; }
.xat-msg.pensant span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: xatPunt 1.2s infinite ease-in-out; }
.xat-msg.pensant span:nth-child(2) { animation-delay: .15s; } .xat-msg.pensant span:nth-child(3) { animation-delay: .3s; }
@keyframes xatPunt { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.xat-peu { display: flex; gap: 8px; align-items: flex-end; padding: 12px 14px 6px; border-top: 1px solid var(--line); background: var(--surface); }
.xat-peu textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 11px; font: inherit;
  font-size: .875rem; line-height: 1.4; outline: 0; min-height: 38px; color: var(--fg); background: var(--surface); }
.xat-peu textarea:focus { border-color: var(--red); }
.xat-peu .btn { width: 38px; height: 38px; padding: 0; justify-content: center; font-size: 1.1rem; }
.xat-avis { font-size: .6875rem; color: var(--muted); padding: 0 14px 12px; background: var(--surface); }
@media print { .xat { display: none; } }

/* Cost de l'assistent al header (administradors) */
.cost-ia { height: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 10px; color: #fff;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); font-size: .8125rem; white-space: nowrap; cursor: default; }
.cost-ia b { font-weight: 600; }
.cost-ia-sep { width: 1px; height: 16px; background: rgba(255, 255, 255, .25); }
.cost-ia span:last-child { opacity: .75; }
@media (max-width: 700px) { .cost-ia .cost-ia-sep, .cost-ia span:last-child { display: none; } }

/* ── Portal: barra lateral de dashboards (plegable; a mòbil, calaix) ── */
.portal { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: start; max-width: 1860px; margin: 0 auto; }
.portal.sense-nav, .portal.plegat { grid-template-columns: minmax(0, 1fr); }
.portal.plegat .nav-d { display: none; }
.portal-cos { min-width: 0; }
.nav-d { position: sticky; top: 76px; margin: 24px 0 16px 24px; max-height: calc(100vh - 100px); display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid #e3e8ef; border-radius: 16px; box-shadow: 0 1px 3px rgba(16, 24, 40, .06); overflow: hidden; }
.nd-cap { display: flex; align-items: center; gap: 8px; padding: 14px 12px 8px 16px; }
.nd-tit { font-weight: 600; color: var(--dark); font-size: .9375rem; }
.nd-n { font-size: .6875rem; font-weight: 600; color: var(--muted-2); background: var(--bg); border-radius: 999px; padding: 1px 7px; }
.nd-plega { margin-left: auto; border: 0; background: transparent; color: var(--muted-2); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.nd-plega:hover { background: var(--bg); color: var(--dark); }
.nd-plega .ico { width: 18px; height: 18px; }
.nd-cerca { display: flex; align-items: center; gap: 8px; margin: 4px 12px 8px; padding: 0 10px; height: 36px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); }
.nd-cerca:focus-within { border-color: var(--any0); box-shadow: 0 0 0 3px rgba(11, 92, 173, .12); }
.nd-cerca .ico { width: 16px; height: 16px; flex: 0 0 16px; }
.nd-cerca input { border: 0; outline: 0; flex: 1; min-width: 0; font: inherit; font-size: .8125rem; background: transparent; color: var(--fg); }
.nd-cos { overflow: auto; padding: 2px 6px 12px; flex: 1; }
.nd-g > summary { list-style: none; display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 7px 10px; border-radius: 8px; user-select: none; }
.nd-g > summary::-webkit-details-marker { display: none; }
.nd-g > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; margin: 0 4px 0 2px; flex: 0 0 6px; }
.nd-g[open] > summary::before { transform: rotate(45deg); }
.nd-g > summary:hover { background: var(--bg); }
.nd-n1 > summary .nd-gt { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-2); }
.nd-n2 { margin-left: 8px; }
.nd-n2 > summary .nd-gt { font-size: .8125rem; font-weight: 600; color: var(--dark); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-n1 > summary .nd-gt { flex: 1; }
.nd-menu { border: 0; background: transparent; color: var(--muted); width: 26px; height: 22px; border-radius: 6px; cursor: pointer; display: grid; place-items: center; opacity: 0; }
.nd-menu .ico { width: 16px; height: 16px; }
.nd-g > summary:hover .nd-menu, .nd-menu:focus-visible { opacity: 1; }
.nd-menu:hover { background: var(--line-soft); color: var(--dark); }
.nd-l { list-style: none; margin: 0 0 4px; padding: 0 0 0 10px; }
.nd-it { position: relative; display: flex; align-items: center; border-radius: 8px; }
.nd-it:hover { background: var(--bg); }
.nd-it.on { background: #e8f1fb; }
.nd-it.on::before { content: ""; position: absolute; left: -6px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--any0); }
.nd-obre { flex: 1; min-width: 0; text-align: left; border: 0; background: transparent; cursor: pointer; padding: 6px 8px; font: inherit; display: flex; flex-direction: column; }
.nd-nom { font-size: .8125rem; color: var(--dark); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-it.on .nd-nom { color: var(--any0); font-weight: 600; }
.nd-sub { font-size: .6875rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-acc { border: 0; background: transparent; color: var(--muted); width: 26px; height: 26px; margin-right: 4px; border-radius: 6px; cursor: pointer; display: grid; place-items: center; opacity: 0; flex: 0 0 26px; }
.nd-acc .ico { width: 15px; height: 15px; }
.nd-it:hover .nd-acc, .nd-acc:focus-visible { opacity: 1; }
.nd-acc:hover { background: var(--line-soft); color: var(--dark); }
.nd-pista { font-size: .75rem; color: var(--muted); padding: 8px 10px; border: 1.5px dashed var(--line); border-radius: 8px; margin: 2px 4px 6px 0; }
.nd-seccio { min-height: 8px; }
.nd-seccio .sortable-ghost, .nd-l .sortable-ghost { background: #e8f1fb; border-radius: 8px; }
.nd-nova { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px 18px; border: 0; background: transparent; color: var(--any0); font: inherit; font-size: .8125rem; font-weight: 500; cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.nd-nova:hover { background: #e8f1fb; }
.nd-nova .ico { width: 15px; height: 15px; }
.nd-res, .nd-buit { font-size: .75rem; color: var(--muted); padding: 6px 10px; }
.nd-pop { position: fixed; z-index: 300; min-width: 220px; max-width: 300px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px; }
.nd-pop button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 6px; font: inherit; font-size: .8125rem; color: var(--dark); cursor: pointer; }
.nd-pop button:hover:not(:disabled) { background: var(--bg); }
.nd-pop button:disabled { color: var(--muted); cursor: default; }
.nd-pop button.perill { color: var(--neg); }
.nd-pop hr { border: 0; border-top: 1px solid var(--line-soft); margin: 4px 0; }
.nd-toggle { width: 42px; padding: 0; justify-content: center; }
.nd-fons { display: none; }
@media (max-width: 900px) {
  .portal, .portal.plegat { grid-template-columns: minmax(0, 1fr); }
  .portal .nav-d { display: flex; position: fixed; z-index: 250; top: 0; left: 0; bottom: 0; margin: 0; width: min(320px, 88vw); max-height: none;
    border-radius: 0 16px 16px 0; transform: translateX(-105%); transition: transform .22s ease; }
  .portal.nav-obert .nav-d { transform: none; }
  .portal.nav-obert .nd-fons { display: block; position: fixed; inset: 0; z-index: 240; background: rgba(16, 24, 40, .35); }
}
.sortable-fallback { background: var(--surface); border-radius: 8px; box-shadow: var(--shadow-lg); opacity: .95 !important; list-style: none; }
@media (hover: none) { .nd-acc, .nd-menu { opacity: 1; } }   /* pantalles tàctils: sense «hover», els botons sempre visibles */