/* buclea · Disseny i impressió 3D — pell del mòdul (tokens de docs/maquetas-ui/comu.mjs) */
:root {
  --font: 'Lexend', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --profund: #02604A; --verd: #057C5E; --menta: #36DCAC; --menta-clar: #D6F7EC;
  --tinta: #14211C; --pissarra: #5C6B65; --paper: #F1F7F4; --blanc: #FFFFFF; --linia: #DCE6E1;
  --ocre: #C8841A; --ocre-clar: #FBF1DE; --error: #C63D2F; --error-clar: #FBE9E6;
  --grad: linear-gradient(135deg, #02604A, #057C5E);
  --grad-marca: linear-gradient(135deg, #057C5E, #36DCAC);
  --ombra: 0 1px 2px rgba(2,96,74,.06), 0 10px 28px rgba(2,96,74,.08);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--font); color: var(--tinta); background: var(--paper);
  font-size: 14.5px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; overflow-x: clip;
}
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.01em; line-height: 1.15; margin: 0; }
.label { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 700; color: var(--pissarra); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--paper); color: var(--pissarra); border: 1px solid var(--linia); line-height: 1.35; }
.chip.ara, .chip.ok { background: var(--menta-clar); color: var(--profund); border-color: transparent; }
.chip.warn { background: var(--ocre-clar); color: var(--ocre); border-color: transparent; }
.chip.mono { font-family: var(--mono); font-weight: 600; }
.card { background: var(--blanc); border: 1px solid var(--linia); border-radius: 16px; box-shadow: var(--ombra); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid var(--linia); background: var(--blanc); color: var(--tinta); padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: 13px; cursor: pointer; font-family: var(--font); transition: border-color .15s, filter .15s, transform .12s, background .15s; text-decoration: none; }
.btn:hover { border-color: var(--verd); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(5,124,94,.35); }
.btn.primary:hover { filter: brightness(1.07); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--pissarra); }
.btn.ghost:hover { background: rgba(2,96,74,.06); color: var(--tinta); }
.btn.sm { padding: 5px 12px; font-size: 12.5px; }
.btn[aria-pressed="true"] { border-color: var(--verd); color: var(--profund); background: var(--menta-clar); }
.btn:focus-visible, input:focus-visible, canvas:focus-visible, .sess-card:focus-visible, .moment:focus-visible, .pill:focus-visible { outline: 2px solid var(--menta); outline-offset: 2px; }
input[type="range"] { accent-color: var(--verd); width: 100%; }

/* ------------------------------------------------------------ barra única */
.barra { height: 56px; flex: none; background: var(--blanc); border-bottom: 1px solid var(--linia); display: flex; align-items: center; gap: 16px; padding: 0 22px; }
.wordmark { text-decoration: none; font-weight: 700; font-size: 21px; letter-spacing: -.02em; background: var(--grad-marca); -webkit-background-clip: text; background-clip: text; color: transparent; }
.barra .sep { width: 1px; height: 24px; background: var(--linia); }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; min-width: 0; }
.crumbs .c { color: var(--pissarra); font-weight: 500; white-space: nowrap; }
.crumbs .c.ult { color: var(--tinta); font-weight: 600; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--menta-clar); color: var(--profund); display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.cami { flex: none; background: var(--blanc); border-bottom: 1px solid var(--linia); padding: 8px 22px 10px; display: flex; align-items: center; gap: 18px; }
.peu { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 22px; font-size: 11.5px; color: var(--pissarra); border-top: 1px solid var(--linia); background: var(--blanc); }

.pantalla { flex: 1; min-height: 0; display: none; flex-direction: column; }
.pantalla.activa { display: flex; animation: fosa .3s ease; }
@keyframes fosa { from { opacity: 0; } }

/* ----------------------------------------------------------------- mapa -- */
.mapa-cap { flex: none; background: var(--grad-marca); color: #fff; padding: 22px 28px; display: flex; align-items: center; gap: 20px; position: relative; overflow: hidden; }
.mapa-cap::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to top, transparent 0 9px, rgba(255,255,255,.07) 9px 10px); pointer-events: none; }
.mapa-cap > * { position: relative; }
.mapa-cap .fig { width: 54px; height: 54px; border-radius: 14px; background: rgba(255,255,255,.18); display: grid; place-items: center; flex: none; }
.mapa-cap .fig svg { width: 30px; height: 30px; stroke: #fff; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sess-grid { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; padding: 18px 28px; align-content: start; }
.sess-card { text-align: left; font-family: var(--font); cursor: pointer; background: var(--blanc); border: 1px solid var(--linia); border-radius: 16px; padding: 15px 17px; display: flex; flex-direction: column; gap: 8px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s; }
.sess-card:hover { border-color: var(--verd); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(2,96,74,.14); }
.sess-card.ara { border-color: var(--verd); border-width: 1.5px; box-shadow: 0 6px 18px rgba(2,96,74,.12); }
.sess-card[disabled] { cursor: default; opacity: .75; }
.sess-card[disabled]:hover { transform: none; box-shadow: var(--ombra); border-color: var(--linia); }
.sess-card .fila { display: flex; align-items: center; gap: 8px; }
.sess-card h4 { font-size: 14.5px; font-weight: 600; }
.sess-card .mec { font-size: 12.5px; color: var(--pissarra); line-height: 1.5; }

/* -------------------------------------------------------------- càpsula -- */
.cos { flex: 1; display: flex; min-height: 0; }
.rail { width: 316px; flex: none; display: flex; flex-direction: column; gap: 12px; padding: 16px 14px 12px 18px; min-height: 0; overflow: auto; }
.rail h1 { font-size: 22px; letter-spacing: -.015em; }
.moments { display: flex; flex-direction: column; gap: 8px; }
.moment { position: relative; text-align: left; font-family: var(--font); background: var(--blanc); border: 1px solid var(--linia); border-radius: 16px; padding: 12px 16px 12px 44px; cursor: pointer; transition: border-color .2s, box-shadow .2s; width: 100%; }
.moment .dot { position: absolute; left: 14px; top: 13px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--linia); background: var(--blanc); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--pissarra); transition: all .2s; }
.moment.fet .dot { background: var(--verd); border-color: var(--verd); color: #fff; }
.moment.actiu { border-color: var(--verd); border-width: 1.5px; box-shadow: 0 8px 22px rgba(2,96,74,.13); }
.moment.actiu .dot { border-color: var(--menta); background: var(--menta-clar); color: var(--profund); box-shadow: 0 0 0 4px rgba(54,220,172,.25); }
.moment .m-cap { display: flex; align-items: center; gap: 8px; }
.moment .m-cap b { font-size: 14px; }
.moment .m-cos { display: none; margin-top: 8px; font-size: 13px; }
.moment.actiu .m-cos { display: block; animation: obre .3s ease; }
@keyframes obre { from { opacity: 0; transform: translateY(-4px); } }
.moment .m-cos p { margin: 0 0 10px; }
.pred-op { text-align: left; justify-content: flex-start; width: 100%; margin-bottom: 6px; }
.pred-op[data-triada="1"] { border-color: var(--verd); background: var(--menta-clar); color: var(--profund); }

.visor-zona { flex: 1; min-width: 0; padding: 16px 18px 12px 6px; display: flex; }
.visor-card { flex: 1; position: relative; border-radius: 18px; border: 1px solid var(--linia); overflow: hidden; box-shadow: var(--ombra);
  background:
    radial-gradient(900px 420px at 50% 30%, rgba(54,220,172,.10), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #F7FBF9 55%, #E9F2ED 100%);
}
.visor-card canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#gl3d { cursor: grab; }
#gl3d:active { cursor: grabbing; }
#cotes { pointer-events: none; }
.flotant { position: absolute; display: flex; gap: 6px; z-index: 4; }
.flotant .btn { background: rgba(255,255,255,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 3px 10px rgba(2,96,74,.13); border-color: transparent; }
.flotant .btn[aria-pressed="true"] { background: var(--menta-clar); border-color: var(--verd); }
.vistes { top: 14px; left: 16px; flex-wrap: wrap; max-width: 60%; }
.eines-visor { top: 14px; right: 16px; }
.fitxer { position: absolute; top: 60px; left: 16px; z-index: 4; font-family: var(--mono); font-size: 11.5px; color: var(--pissarra); background: rgba(255,255,255,.75); border-radius: 8px; padding: 3px 10px; }

.pills { position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 4; flex-wrap: wrap; justify-content: center; max-width: 92%; }
.pill { display: inline-flex; align-items: center; gap: 7px; border: 0; cursor: pointer; font-family: var(--font); font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 14px rgba(2,96,74,.14); color: var(--tinta); transition: transform .15s, box-shadow .15s; }
.pill:hover { transform: translateY(-1px); }
.pill .pic { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.pill.ok .pic { background: var(--menta-clar); color: var(--profund); }
.pill.bad .pic { background: var(--error-clar); color: var(--error); }
.pill.bad { box-shadow: 0 4px 14px rgba(198,61,47,.22); }
.pill.pulsa { animation: pulsa .5s ease 2; }
@keyframes pulsa { 50% { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(200,132,26,.4); } }

.desc-linia { position: absolute; left: 16px; bottom: 14px; right: 16px; display: flex; justify-content: center; z-index: 4; pointer-events: none; }
.desc-linia .glass { background: rgba(14,38,32,.78); color: #D6F7EC; border-radius: 999px; padding: 7px 16px; font-size: 12.5px; max-width: 92%; box-shadow: 0 4px 14px rgba(0,0,0,.18); }

.param-card { position: absolute; right: 16px; bottom: 118px; width: 268px; z-index: 4; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--linia); border-radius: 16px; padding: 14px 16px; box-shadow: 0 10px 30px rgba(2,96,74,.16); transition: box-shadow .3s, border-color .3s; }
.param-card.crida { border-color: var(--verd); box-shadow: 0 0 0 4px rgba(54,220,172,.28), 0 10px 30px rgba(2,96,74,.16); }
.param-card .p-cap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.param-card .p-cap b { font-size: 13.5px; }
.param-card .v { font-family: var(--mono); font-weight: 600; font-size: 16px; color: var(--profund); }
.param-card .esc { display: flex; justify-content: space-between; gap: 6px; font-size: 10.5px; color: var(--pissarra); margin-top: 4px; align-items: center; }
.param-card .accio { margin-top: 10px; width: 100%; }

.exit-flot { position: absolute; left: 50%; top: 16%; transform: translate(-50%, -50%); z-index: 5; background: rgba(255,255,255,.95); border: 1.5px solid var(--verd); color: var(--profund); font-weight: 700; font-size: 15px; border-radius: 999px; padding: 10px 22px; box-shadow: 0 14px 40px rgba(2,96,74,.25); display: none; align-items: center; gap: 10px; }
.exit-flot.mostra { display: inline-flex; animation: exitpop .5s cubic-bezier(.2,.9,.3,1.35); }
@keyframes exitpop { from { opacity: 0; transform: translate(-50%, -30%) scale(.9); } }

.pista-orbita { position: absolute; left: 50%; bottom: 130px; transform: translateX(-50%); z-index: 4; background: rgba(14,38,32,.78); color: #D6F7EC; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 6px 14px; pointer-events: none; transition: opacity .5s; display: flex; gap: 7px; align-items: center; }
.pista-orbita.fora { opacity: 0; }

svg.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media (max-width: 860px) {
  .cos { flex-direction: column; overflow: auto; }
  .rail { width: auto; padding: 14px 16px 0; overflow: visible; }
  .visor-zona { padding: 12px 16px; min-height: 460px; }
}

/* ------------------------------------------------------- panell laminador */
.lam-panell {
  position: absolute; left: 16px; bottom: 74px; width: 320px; z-index: 4;
  background: rgba(255,255,255,.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--linia); border-radius: 16px; padding: 12px 14px;
  box-shadow: 0 10px 30px rgba(2,96,74,.16);
}
.lam-panell .lam-cap { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.lam-panell svg { display: block; width: 100%; height: auto; background: var(--paper); border-radius: 10px; }
.lam-panell input[type="range"] { margin: 8px 0 6px; }
.lam-cfg { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.lam-cfg > span:first-child { width: 62px; color: var(--pissarra); }
.lam-mes { display: flex; justify-content: space-between; font-size: 12px; margin-top: 4px; }
.lam-bar { height: 8px; border-radius: 999px; background: var(--paper); border: 1px solid var(--linia); overflow: hidden; margin-bottom: 4px; }
.lam-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--profund), var(--menta)); transition: width .3s ease; }
.gcode-mini { background: var(--tinta); color: var(--menta-clar); border-radius: 10px; padding: 8px 10px; font-family: var(--mono); font-size: 12px; line-height: 1.7; margin-top: 8px; }
.gcode-mini .ok { color: var(--menta); }
.gcode-mini .com { color: #7FA294; }
.pred-op[data-mal="1"] { border-color: var(--error); background: var(--error-clar); color: var(--error); }

/* ----------------------------------------------------------- editor (F3) */
.editor-card { width: 344px; max-height: calc(100% - 200px); overflow: auto; }
.ed-fila { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ed-graella { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; margin-top: 6px; }
.ed-camp { font-size: 11.5px; font-weight: 600; display: block; }
.ed-camp span { display: flex; justify-content: space-between; gap: 8px; }
.ed-camp b { color: var(--profund); font-family: var(--mono); font-weight: 600; }
.ed-camp input { margin: 1px 0 4px; }
.ed-esborra { color: var(--error); }
.ed-esborra:hover { border-color: var(--error); }
.m-figura { background: var(--paper); border-radius: 10px; padding: 8px; margin: 8px 0; }
.m-figura svg { width: 100%; height: auto; display: block; }
.tram-tabs { display: flex; gap: 6px; }
.tram-tabs .btn { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.4); color: #fff; }
.tram-tabs .btn[aria-pressed="true"] { background: #fff; color: var(--profund); border-color: transparent; }

/* ===================================== auditoria premium (F3.1) ========== */
/* 1. El Comprova flotant tornava blanc-sobre-blanc: el primary mana. */
.flotant .btn.primary { background: var(--grad); border-color: transparent; color: #fff; }
.flotant .btn.primary:hover { filter: brightness(1.07); }

/* 2. El xip del fitxer no xoca amb la fila de vistes quan aquesta envolta. */
.fitxer { left: auto; right: 16px; top: 60px; }

/* 3. Les píndoles no s'amaguen mai sota la targeta dreta. */
.visor-card.amb-card .pills {
  left: 16px; right: 376px; transform: none; justify-content: flex-start;
}

/* 4. Pistes graduades (paritat amb la maqueta aprovada). */
.pistes-files { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; font-size: 12.5px; }
.pista-fila { display: flex; gap: 8px; align-items: flex-start; }
.pista-fila .chip { flex: none; }
.pista-fila.tancada { color: var(--pissarra); cursor: pointer; }
.pista-fila.bloquejada { color: var(--pissarra); opacity: .65; }
.pista-fila .obre { margin-left: auto; color: var(--verd); font-weight: 600; white-space: nowrap; }

/* 5. Contingut gran per a sessions sense visor (quiz i repte al centre). */
#sense-visor { overflow: auto; }
.gran-card { max-width: 620px; width: 100%; }
.gran-card .g-cap { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.gran-card h3 { font-size: 18px; }
.gran-card .pregunta { font-size: 15px; font-weight: 600; margin: 16px 0 8px; }
.gran-card .pred-op { font-size: 13.5px; padding: 9px 16px; }
.gran-card .just { font-size: 13px; color: var(--pissarra); margin: 6px 0 0; }
.gran-exit { display: none; margin-top: 16px; background: var(--menta-clar); color: var(--profund); border-radius: 14px; padding: 14px 18px; font-weight: 700; text-align: center; }
.gran-exit.mostra { display: block; animation: exitpop .5s cubic-bezier(.2,.9,.3,1.35); }
.gran-exit small { display: block; font-weight: 500; margin-top: 4px; }
.gran-exit .btn { margin-top: 10px; }

/* 6. Laminador compacte: mai per sobre de la fila de vistes. */
.lam-panell { max-height: calc(100% - 132px); overflow: auto; width: 300px; }
.lam-panell svg { max-height: 84px; }

/* 7. Pantalles estretes: la targeta activa és un full inferior a tota amplada
 *    i les píndoles pugen sota la fila de vistes (les targetes són FILLES del
 *    visor: static hi faria un embolic de flux). */
@media (max-width: 1020px) {
  .editor-card, .param-card, .lam-panell {
    left: 10px; right: 10px; bottom: 10px; width: auto; max-height: 46%;
    overflow: auto;
  }
  .pills,
  .visor-card.amb-card .pills,
  .visor-card.amb-lam .pills {
    top: 100px; bottom: auto; left: 12px; right: 12px;
    transform: none; justify-content: flex-start;
  }
  .desc-linia, .pista-orbita { display: none; }
  .exit-flot { top: 30%; }
  .fitxer { display: none; }
  .barra #btn-guia { display: none; }
  .crumbs { overflow: hidden; }
  .crumbs .c { overflow: hidden; text-overflow: ellipsis; }
}

/* B9: amb el panell de laminat obert, les píndoles viuen entre les dues cartes. */
.visor-card.amb-lam .pills { left: 332px; right: 376px; transform: none; justify-content: center; }
@media (max-width: 1020px) {
  .visor-card.amb-lam .pills { left: 50%; right: auto; transform: translateX(-50%); }
}

/* ======================================== tram C · projecte (F4) ======== */
.gran-card { max-width: 720px; }
.proj-titol { font-weight: 700; font-size: 15px; margin: 0 0 12px; letter-spacing: -.01em; }

/* fitxes (C1, C3) */
.fitxes { display: flex; flex-direction: column; gap: 10px; }
.fitxa {
  text-align: left; font-family: var(--font); cursor: pointer; width: 100%;
  background: var(--blanc); border: 1.5px solid var(--linia); border-radius: 14px;
  padding: 13px 16px; display: flex; flex-direction: column; gap: 5px;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.fitxa:hover { border-color: var(--verd); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(2,96,74,.10); }
.fitxa.triada { border-color: var(--verd); background: var(--menta-clar); }
.fitxa.triada.mala { border-color: var(--ocre); background: var(--ocre-clar); }
.fitxa .f-cap { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.fitxa .f-cap b { flex: 1; }
.fitxa .f-qui { font-size: 11.5px; color: var(--pissarra); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.fitxa .f-detall { font-size: 13px; color: var(--tinta); }
.fitxa .f-dades { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.fitxa .f-perque { font-size: 12.5px; color: var(--profund); font-weight: 600; margin-top: 4px; }
.fitxa.triada.mala .f-perque { color: var(--ocre); }

/* formularis (C2, C7) */
.form-camps { display: flex; flex-direction: column; gap: 14px; }
.form-camp label { font-size: 13.5px; display: block; margin-bottom: 4px; }
.form-camp textarea {
  width: 100%; font-family: var(--font); font-size: 13.5px; color: var(--tinta);
  border: 1.5px solid var(--linia); border-radius: 12px; padding: 9px 12px; resize: vertical;
  background: var(--blanc);
}
.form-camp textarea:focus { outline: none; border-color: var(--verd); }
.form-ajuda { display: block; font-size: 11.5px; color: var(--pissarra); margin-top: 3px; }
.form-nombre { display: flex; align-items: center; gap: 12px; }
.form-nombre input { flex: 1; }
.form-nombre .v { color: var(--profund); font-weight: 600; min-width: 66px; text-align: right; }
.form-opcions { display: flex; gap: 6px; flex-wrap: wrap; }

/* peu de rei (C8) */
.cotes { display: flex; flex-direction: column; gap: 14px; }
.cota-fila { border: 1.5px solid var(--linia); border-radius: 14px; padding: 12px 14px; background: var(--blanc); }
.cota-fila.feta { border-color: var(--verd); background: var(--menta-clar); }
.cota-cap { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-bottom: 4px; }
.cota-cap b { flex: 1; }
.peu-svg { display: block; width: 100%; height: auto; }
.cota-ctrl { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.cota-ctrl input { flex: 1; }
.cota-ctrl .v { color: var(--profund); font-weight: 600; min-width: 62px; text-align: right; }
.cota-ctrl .desv { font-family: var(--mono); font-size: 12px; font-weight: 600; min-width: 62px; text-align: right; }
.cota-ctrl .desv.bona { color: var(--verd); }
.cota-ctrl .desv.alta { color: var(--ocre); }

/* memòria (C9) */
.mem-cap { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.mem-cap .proj-titol { margin: 0; }
.memoria {
  background: var(--paper); border-radius: 14px; padding: 14px 18px; margin-bottom: 14px;
  max-height: 300px; overflow: auto;
}
.memoria h3 { font-size: 11.5px; color: var(--verd); text-transform: uppercase; letter-spacing: .07em; margin: 14px 0 4px; }
.memoria h3:first-child { margin-top: 0; }
.memoria table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.memoria th { text-align: left; width: 38%; font-weight: 600; padding: 5px 10px 5px 0; border-bottom: 1px solid var(--linia); vertical-align: top; }
.memoria td { padding: 5px 0; border-bottom: 1px solid var(--linia); }
.memoria i { color: var(--pissarra); }
.memoria .concl { font-size: 13px; margin: 0; }

/* rúbrica (C10) */
.rubrica { display: flex; flex-direction: column; gap: 12px; }
.rub-dim { border: 1px solid var(--linia); border-radius: 14px; padding: 12px 14px; background: var(--blanc); }
.rub-cap { margin-bottom: 8px; }
.rub-cap b { font-size: 14px; }
.rub-que { display: block; font-size: 12px; color: var(--pissarra); margin-top: 2px; }
.rub-graus { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.rub-grau {
  text-align: left; font-family: var(--font); cursor: pointer; background: var(--paper);
  border: 1.5px solid var(--linia); border-radius: 10px; padding: 8px 9px;
  display: flex; flex-direction: column; gap: 3px; transition: border-color .15s, background .15s;
}
.rub-grau:hover { border-color: var(--verd); }
.rub-grau.triat { border-color: var(--verd); background: var(--menta-clar); }
.rub-grau .sig { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--profund); }
.rub-grau .txt { font-size: 11px; color: var(--pissarra); line-height: 1.35; }
.rub-grau.triat .txt { color: var(--tinta); }
.rub-nota { font-size: 12px; color: var(--pissarra); margin: 10px 0 0; }
@media (max-width: 700px) { .rub-graus { grid-template-columns: 1fr 1fr; } }


/* ============================================ panell de classe (F6) ====== */
.resum-card { margin: 10px 26px 0; padding: 16px 20px; max-width: 640px; margin-left: auto; margin-right: 26px; }
.resum-cos label input { display: block; width: 100%; margin: 4px 0 10px; padding: 7px 10px; border: 1.5px solid var(--linia); border-radius: 9px; font: inherit; }
.resum-cos textarea { width: 100%; font-family: var(--mono); font-size: 11px; border: 1.5px solid var(--linia); border-radius: 9px; padding: 8px 10px; margin-bottom: 8px; word-break: break-all; background: var(--paper); }
.classe-cos { padding: 4px 26px 40px; }
.classe-cap h2 { margin: 12px 0 4px; font-size: 19px; }
.classe-cap p { margin: 0 0 14px; max-width: 68ch; font-size: 13.5px; color: var(--pissarra); }
.classe-entrada { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 18px; }
.classe-entrada textarea { flex: 1; min-width: 280px; font-family: var(--mono); font-size: 11px; border: 1.5px solid var(--linia); border-radius: 10px; padding: 8px 10px; }
.classe-taula-embolcall { overflow-x: auto; border: 1px solid var(--linia); border-radius: 14px; background: #fff; }
.classe-taula { border-collapse: collapse; width: 100%; font-size: 12.5px; min-width: 720px; }
.classe-taula th { text-align: left; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--pissarra); padding: 10px 10px 8px; border-bottom: 1.5px solid var(--linia); white-space: nowrap; }
.classe-taula td { padding: 8px 10px; border-bottom: 1px solid var(--linia); }
.classe-taula tr:last-child td { border-bottom: none; }
.cl-nom { font-weight: 600; }
.cl-nom .muted { display: block; font-weight: 400; font-size: 10.5px; }
.cl-buida { color: var(--pissarra); background: repeating-linear-gradient(45deg, transparent 0 5px, var(--paper) 5px 9px); text-align: center; }
.cl-plena { color: var(--verd); font-weight: 700; }
.cl-treu { color: var(--pissarra); font-size: 11px; padding: 2px 8px; }
.classe-peu { display: flex; gap: 14px; align-items: center; margin-top: 14px; flex-wrap: wrap; }


/* ===================================== visual premium del visor (F6+) === */
/* fons amb profunditat: el llit respira en un espai, no sobre un pla pla */
.visor-card canvas#gl3d {
  background:
    radial-gradient(120% 90% at 50% 30%, #FDFEFD 0%, #F3F8F5 52%, #E6EFEA 100%);
}
/* la llegenda del que marca l'ocre: el senyal d'aprenentatge, explicat al lloc */
.flotant.llegenda {
  top: 52px; left: 14px; right: auto; bottom: auto;
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; color: var(--pissarra);
  background: rgba(255,255,255,.88); backdrop-filter: blur(4px);
  border: 1px solid var(--linia); border-radius: 999px;
  padding: 3px 11px 3px 5px; max-width: 320px;
}
.lleg-punt {
  width: 12px; height: 12px; border-radius: 4px; flex: none;
  background: repeating-linear-gradient(45deg, #D98E2B 0 3px, #C8841A 3px 6px);
}
.lleg-bar {
  width: 46px; height: 9px; border-radius: 999px; flex: none;
  border: 1px solid var(--linia);
}
.lleg-bar.tensio { background: linear-gradient(90deg, #DCE9E2, #C8841A); }
@media (max-width: 1020px) { .flotant.llegenda { max-width: 220px; } }

/* la foto de la peca dins de la memoria en pantalla */
.memoria .mem-foto { max-width: 300px; border: 1px solid var(--linia); border-radius: 10px; margin: 4px 0 10px; display: block; }

/* ---- segona planta (G5): optimitzacio topologica ---- */
.simp-camp { width: 100%; height: auto; background: var(--blanc); border: 1px solid var(--linia); border-radius: 12px; display: block; }
.simp-barra { display: flex; gap: 14px; align-items: flex-end; margin-top: 10px; }
.simp-lectura { margin-top: 8px; font-size: 11.5px; color: var(--pissarra); }
.isi { margin-top: 10px; padding: 9px 12px; border: 1px dashed var(--menta); border-radius: 10px; font-size: 12px; color: var(--pissarra); background: var(--menta-clar); }
.isi b { color: var(--verd); }

/* ---- fase H: maquina, serie i calibratge ---- */
.serie-zona { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linia); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.serie-barra { flex-basis: 100%; height: 8px; border-radius: 999px; background: var(--menta-clar); overflow: hidden; }
.serie-barra i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--verd); transition: width .2s; }

/* El pont del panell local cap al panell autenticat del portal. */
.pont-resultats { margin: 4px 26px 0; font-size: 12.5px; color: var(--pissarra); }
.pont-resultats a { color: var(--verd); }

/* ------------------------------------------------------------------ mòbil
 * La demo s'envia per WhatsApp: a 390 px cap element pot imposar la seva
 * amplada mínima (un ítem flex amb text sense tallar eixampla la finestra i
 * tot queda diminut). Les capes flotants passen a ocupar l'amplada sencera. */
@media (max-width: 680px) {
  * { min-width: 0; }
  .barra, .cami, .peu, .mapa-cap { flex-wrap: wrap; height: auto; row-gap: 6px; padding-left: 14px; padding-right: 14px; }
  .barra { padding-top: 8px; padding-bottom: 8px; }
  .crumbs .c, .chip, .pista-fila .obre { white-space: normal; }
  .sess-grid { grid-template-columns: 1fr; padding: 12px 14px; }
  .rail { padding: 12px 14px 0; }
  .visor-zona { min-height: 360px; }
  .editor-card, .lam-panell, .param-card { width: auto; max-width: none; left: 10px; right: 10px; }
  .gran-card { max-width: 100%; }
  .resum-card { margin-left: 14px; margin-right: 14px; }
  .classe-taula { min-width: 0; }
  .flotant.llegenda { max-width: calc(100vw - 20px); }
}

/* Espai de treball: escena, inspector i feedback tenen espai propi. */
[hidden] { display: none !important; }
.visor-zona { flex-direction: column; gap: 10px; min-height: 0; }
.workspace-toolbar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.workspace-toolbar .vistes, .workspace-toolbar .eines-visor, .camera-tools { position: static; display: flex; flex-wrap: wrap; gap: 5px; max-width: none; }
.workspace-toolbar .eines-visor { margin-left: auto; }
.workspace-toolbar .btn { min-height: 34px; }
.workspace-body { flex: 1; min-height: 250px; display: flex; gap: 12px; }
.workspace-body .visor-card { min-width: 0; min-height: 250px; }
#gl3d { touch-action: none; }
.inspector { width: 302px; flex: none; min-height: 0; display: flex; flex-direction: column; background: var(--blanc); border: 1px solid var(--linia); border-radius: 16px; overflow: hidden; }
.inspector-tabs { display: flex; gap: 5px; padding: 10px; border-bottom: 1px solid var(--linia); }
.inspector-tabs [aria-selected="true"] { background: var(--menta-clar); border-color: var(--verd); color: var(--profund); }
.inspector-tabs .btn:disabled { display: none; }
.inspector-scroll { padding: 12px; overflow: auto; min-height: 0; scrollbar-gutter: stable; }
.inspector .param-card, .inspector .editor-card, .inspector .lam-panell { position: static; width: 100%; max-width: none; max-height: none; padding: 0; box-shadow: none; border: 0; border-radius: 0; background: transparent; overflow: visible; backdrop-filter: none; }
.inspector .param-card.crida { box-shadow: none; }
.inspector .ed-graella { gap: 10px; }
.inspector input[type="range"] { min-height: 28px; }
.inspector .p-cap { gap: 8px; flex-wrap: wrap; }
.inspector .lam-panell svg { width: 100%; height: 142px; max-height: none; }
.components { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 12px; }
.components:empty { display: none; }
.seleccio-desc, .lam-nota { font-size: 12px; color: var(--pissarra); line-height: 1.6; }
.seleccio-desc:empty { display: none; }
.lam-llegenda { font-size: 12px; }
.perim { color: var(--profund); } .farcit { color: #A7650B; }
.gcode-mini { overflow: auto; white-space: pre; font-size: 12px; }
.workspace-feedback { flex: none; border: 1px solid var(--linia); border-radius: 14px; padding: 10px 12px; background: var(--blanc); max-height: 175px; overflow: auto; }
.workspace-feedback .pills { position: static; transform: none; max-width: none; justify-content: flex-start; gap: 6px; }
.workspace-feedback .pill { box-shadow: none; background: var(--paper); padding: 7px 10px; border: 1px solid var(--linia); }
.workspace-feedback .pill[aria-pressed="true"] { border-color: var(--verd); background: var(--menta-clar); }
.workspace-feedback .desc-linia { position: static; display: block; pointer-events: auto; margin-top: 8px; }
.workspace-feedback .glass { display: block; padding: 0; border-radius: 0; max-width: none; box-shadow: none; background: transparent; color: var(--tinta); line-height: 1.6; font-size: 13px; }
.camera-estat { position: absolute; left: 12px; bottom: 10px; font-size: 11px; padding: 4px 8px; background: rgba(255,255,255,.92); color: var(--pissarra); border-radius: 8px; pointer-events: none; }
.assaig-estat { position: absolute; left: 12px; bottom: 42px; max-width: calc(100% - 24px); font-size: 12px; padding: 5px 8px; background: var(--ocre-clar); color: #80520F; border-radius: 8px; pointer-events: none; }
.visor-card .fitxer { top: 10px; right: 10px; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; }
.visor-card .llegenda { top: 44px; left: 12px; max-width: calc(100% - 24px); }
.visor-card .exit-flot { top: 90px; font-size: 13px; max-width: 90%; }
.visor-card .pista-orbita { bottom: 44px; }
#assaig-resultat { margin-top: 0; font-size: 13px; line-height: 1.8; }
@media (max-width: 1150px) {
  .workspace-body { flex-direction: column; flex: 1 0 422px; min-height: 422px; }
  .workspace-body .visor-card { flex: 1 1 auto; min-height: 210px; }
  .inspector { width: 100%; flex: 0 0 auto; max-height: 200px; }
  .visor-zona { overflow: auto; }
  .workspace-feedback { max-height: none; }
  .workspace-toolbar .eines-visor { margin-left: 0; }
}
@media (max-width: 860px) {
  .cos { overflow: auto; }
  .rail { overflow: visible; }
  .visor-zona { min-height: 740px; flex: none; padding: 12px; overflow: visible; }
  .workspace-body { flex: 1 0 500px; }
  .inspector .lam-panell svg { height: 110px; }
  .workspace-toolbar .btn { min-height: 38px; }
}