/* Control estadístic de procés · el que és d'aquesta app i de cap altra.
   Tot el que és comú (barra, botons, taules, etiquetes…) és a ../_comu/comu.css.

   La zona té sis franges fixes: les eines, la lectura del que hi ha sota el
   ratolí, el gràfic de control (el focus de la pantalla), l'histograma amb la
   tolerància i la peça a mà, i a baix de tot la franja per simular peces. Res
   no canvia de lloc quan es tria o es passa per sobre d'alguna cosa. */

/* ═══ La barra de _comu, amb aquest títol ═══════════════════════════════ */
/* «Control estadístic de procés» és llarg: entre 761 i 1099 px els botons
   fan servir el text curt (el nom accessible és el llarg) i, si encara no hi
   cap, el títol passa a dues línies en lloc de trepitjar l'etiqueta. */
@media (min-width: 761px) and (max-width: 1099px) {
  .sf-barra .sf-boto__llarg { display: none; }
  .sf-barra .sf-boto__curt { display: inline; }
  .sf-barra__titol { white-space: normal; flex: 0 1 auto; min-width: 0; line-height: 1.15; }
}

/* ═══ La zona ═══════════════════════════════════════════════════════════ */
.zona-control {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto auto;
  grid-template-areas: 'eines' 'guia' 'info' 'grafic' 'histo' 'tol' 'ma' 'afegir';
}
.eines { grid-area: eines; }
.guia-lloc { grid-area: guia; min-width: 0; }
.lectura { grid-area: info; }
.llenc-control { grid-area: grafic; }
.histo { grid-area: histo; }
.tol { grid-area: tol; }
.ma { grid-area: ma; }
.afegir { grid-area: afegir; }
.informe { display: none; }

/* A l'ordinador gran, la tolerància i la peça a mà a l'esquerra de
   l'histograma: el gràfic de control es queda tota l'alçada que sobra. */
@media (min-width: 1200px) {
  .zona-control {
    grid-template-columns: 388px minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: 'eines eines' 'guia guia' 'info info' 'grafic grafic' 'tol histo' 'ma histo' 'afegir afegir';
  }
  .tol, .ma { border-right: var(--sf-linia) solid var(--sf-filet); }
}
/* Entre 901 i 1199 px, o amb una finestra de menys de 680 px d'alt, no hi cap
   tot en una pantalla: la pàgina fa scroll i el gràfic té una alçada fixa. */
@media (min-width: 901px) and (max-width: 1199px), (min-width: 901px) and (max-height: 679px) {
  .sf--pantalla { height: auto; overflow: visible; }
  .sf-dividit { height: auto; }
  .sf-panell .sf-desplacable { overflow: visible; }
  .llenc-control { height: 460px; }
  /* Si el panell és més alt, l'espai que sobra va a sota de tot, no enmig del gràfic. */
  .zona-control { grid-template-rows: none; grid-auto-rows: auto; align-content: start; }
}
@media (max-width: 900px) {
  .zona-control {
    grid-template-rows: auto auto auto auto auto auto auto auto;
    grid-template-areas: 'eines' 'guia' 'grafic' 'info' 'histo' 'tol' 'afegir' 'ma';
  }
}

/* ── Barra d'eines ───────────────────────────────────────────────────── */
.eines { gap: var(--sf-e2) var(--sf-e4); }
@media (max-width: 760px) {
  .eines { padding-top: var(--sf-e3); padding-bottom: var(--sf-e3); gap: var(--sf-e2) var(--sf-e3); }
}
/* El subtítol de la barra, només on hi cap sencer. */
@media (max-width: 1279px) { .sf-barra__subtitol { display: none; } }

/* ── La lectura: el punt, la barra o l'alarma ────────────────────────── */
.lectura {
  padding: var(--sf-e2) var(--sf-gutter);
  border-bottom: var(--sf-linia) solid var(--sf-filet);
  font-size: var(--sf-t-nota); line-height: 1.4; color: var(--sf-gris-fort);
  /* Quatre línies fixes: passar per sobre dels punts no mou res de lloc. */
  height: calc(4 * 1.4em + 2 * var(--sf-e2)); overflow: hidden;
}
/* Si una frase no hi cap, es talla al final d'una línia amb «…», mai a mitja lletra. */
.lectura__dins { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.lectura b { color: var(--sf-tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
.lectura__cap { color: var(--sf-tinta); }
.lectura .sf-etiq { vertical-align: baseline; }
.lectura__repos { color: var(--sf-gris); }
@media (min-width: 1200px) and (max-height: 820px) {
  .lectura { height: calc(3 * 1.4em + 2 * var(--sf-e2)); }
  .lectura__dins { -webkit-line-clamp: 3; }
  /* En tres línies no hi cap la pista de passar per sobre: la guia ja ho diu. */
  .lectura__repos { display: none; }
}
/* «Dada pública» d'una peça és un botó: porta a la seva línia de MACHINE.DAT. */
button.lectura__font { font: inherit; font-weight: 500; font-size: var(--sf-t-petit); color: var(--sf-tinta); cursor: pointer; text-decoration: underline; text-decoration-color: var(--sf-filet-fort); text-underline-offset: 3px; }
@media (pointer: coarse) { button.lectura__font { padding: 13px 4px; margin: -13px -4px; } }
.dialeg-font .font-linia { font-family: var(--sf-mono); font-size: 13px; line-height: 1.6; background: var(--sf-paper-2); color: var(--sf-gris-fort); padding: 10px 12px; overflow-x: auto; white-space: pre; margin: 0 0 var(--sf-e4); }
.dialeg-font .font-linia b { color: var(--sf-tinta); font-weight: 600; }
.dialeg-font .font-cita { margin-top: var(--sf-e3); }
@media (max-width: 900px) {
  .lectura { height: auto; min-height: calc(3 * 1.4em + 2 * var(--sf-e3)); padding-top: var(--sf-e3); padding-bottom: var(--sf-e3); border-top: var(--sf-linia) solid var(--sf-filet); }
  .lectura__dins { display: block; -webkit-line-clamp: none; overflow: visible; }
}

/* Una peça escrita a mà: etiqueta plana, sense color (no és cap dada nostra). */
.sf-etiq--ma { color: var(--sf-gris-fort); }
.sf-etiq--ma::before { background: none; border: 1.5px solid currentColor; border-radius: 0; width: 6px; height: 6px; }

/* ═══ El gràfic de control ═══════════════════════════════════════════════ */
.llenc-control { background: var(--sf-paper); }
.grafic { position: absolute; inset: 0; width: 100%; height: 100%; font-family: var(--sf-sans); }
#grafic-control { cursor: crosshair; touch-action: pan-y; }
#grafic-control:focus-visible { outline-offset: -2px; }
/* Amb el ratolí o el dit, cap anell de focus: només amb el teclat (el terra de :focus-visible). */
#grafic-control:focus:not(:focus-visible),
#histograma .barra:focus:not(:focus-visible),
.taula-maquines tbody tr:focus:not(:focus-visible) { outline: none; }
.grafic text { font-size: 13px; font-variant-numeric: tabular-nums; }
.g-titol { fill: var(--sf-gris-fort); font-weight: 600; }
.g-zona { stroke: var(--sf-filet); stroke-width: 1; }
.g-dia { stroke: var(--sf-filet-fort); stroke-width: 1; }
.g-franja { stroke: var(--sf-gris-suau); stroke-width: 1; }
.g-dia-text { fill: var(--sf-gris); }
.g-eix { stroke: var(--sf-filet-fort); stroke-width: 1; }
.g-eix-text { fill: var(--sf-gris); }
.g-centre { stroke: var(--sf-tinta); stroke-width: 1; }
.g-limit { stroke: var(--sf-tinta); stroke-width: 1; stroke-dasharray: 5 4; }
.g-afegides { stroke: var(--sf-tinta); stroke-width: 1; stroke-dasharray: 2 3; }
.g-afegides-text { fill: var(--sf-tinta); font-weight: 500; }
.g-cami { fill: none; stroke: var(--sf-gris-suau); stroke-width: 1; stroke-linejoin: round; }
.punt--font { fill: var(--sf-tinta); }
.punt--afegida { fill: var(--sf-paper); stroke: var(--sf-tinta); stroke-width: 1.3; }
.punt--alarma { fill: var(--sf-error); stroke: var(--sf-error); stroke-width: 1; }
.rang--font { fill: var(--sf-tinta); }
.rang--afegida { fill: var(--sf-paper); stroke: var(--sf-tinta); stroke-width: 1.2; }
.rang--alarma { fill: var(--sf-error); stroke: var(--sf-error); }
.g-regla { fill: var(--sf-error); font-weight: 600; }
/* El que s'ha triat: l'única marca terra de la pantalla. */
.g-anell { fill: none; stroke: var(--sf-terra); stroke-width: 2; pointer-events: none; }
.g-lim-text { fill: var(--sf-gris-fort); cursor: pointer; }
.g-lim-valor { fill: var(--sf-tinta); font-weight: 600; }
.g-passa { stroke: var(--sf-tinta); stroke-width: 1; stroke-dasharray: 2 3; pointer-events: none; }
@media (hover: hover) {
  .g-lim-text:hover, .g-lim-text:hover .g-lim-valor { fill: var(--sf-calculat); }
}

/* ═══ L'histograma ═══════════════════════════════════════════════════════ */
.histo { padding: var(--sf-e3) var(--sf-gutter) var(--sf-e2); min-width: 0; }
.histo__titol { font-size: var(--sf-t-nota); font-weight: 600; line-height: 1.3; }
.histo__llenc { position: relative; height: 136px; margin-top: 4px; }
.histo__llegenda { margin-top: 2px; gap: 0 var(--sf-e4); font-size: var(--sf-t-petit); line-height: 1.5; align-content: flex-start; }
@media (min-width: 1200px) { .histo__llegenda { min-height: calc(2 * 1.5em); } }
.histo__llegenda > span:nth-child(2) i { color: var(--sf-tinta); border-top-width: 1.5px; }
.histo__llegenda > span:nth-child(3) i { border-top-width: 1.5px; }
.histo__llegenda i.llegenda-barra { width: 12px; height: 10px; border: 0; background: var(--sf-gris-suau); }
.histo__llegenda .llegenda-font i { border-top: 1px solid var(--sf-gris); }
#histograma .barra { cursor: pointer; outline: none; }
.barra__toc { fill: transparent; }
.barra__cos { fill: var(--sf-gris-suau); transition: fill var(--sf-transicio); }
.barra--triada .barra__cos { fill: var(--sf-tinta); }
.barra__n { fill: var(--sf-gris-fort); pointer-events: none; }
.barra--triada .barra__n { fill: var(--sf-tinta); font-weight: 600; }
.barra:focus-visible .barra__toc { stroke: var(--sf-terra); stroke-width: 2; }
@media (hover: hover) {
  .barra:not(.barra--triada):hover .barra__cos { fill: var(--sf-gris); }
}
.h-eix { stroke: var(--sf-filet-fort); stroke-width: 1; }
.h-marca { stroke: var(--sf-filet-fort); stroke-width: 1; }
.h-eix-text { fill: var(--sf-gris); }
.h-contorn { fill: none; stroke: var(--sf-gris); stroke-width: 1; }
.h-corba { fill: none; stroke: var(--sf-tinta); stroke-width: 1.5; pointer-events: none; }
.h-corba--dins { stroke: var(--sf-gris-fort); stroke-width: 1.5; stroke-dasharray: 5 4; }
.h-lim { stroke: var(--sf-tinta); stroke-width: 1.5; }
.h-lim-text { fill: var(--sf-tinta); font-weight: 600; }
.h-nominal { stroke: var(--sf-gris); stroke-width: 1; stroke-dasharray: 1 3; }
.h-nominal-text { fill: var(--sf-gris); }
@media (min-width: 1200px) and (max-height: 820px) {
  .histo__llenc { height: 112px; }
}
@media (min-width: 1200px) and (max-height: 759px) {
  .histo__llenc { height: 96px; }
  /* Les dues franges de dalt (eines i capacitat), una mica més baixes. */
  .eines, .grup { min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
}
@media (max-width: 900px) {
  .histo { border-top: var(--sf-linia) solid var(--sf-filet); padding-top: var(--sf-e4); }
  .histo__llenc { height: 168px; }
}

/* ═══ Tolerància i peça a mà ═════════════════════════════════════════════ */
.bloc { padding: var(--sf-e3) var(--sf-gutter); min-width: 0; }
.bloc + .bloc { border-top: var(--sf-linia) solid var(--sf-filet); }
.bloc__cap { display: flex; align-items: center; gap: 6px var(--sf-e3); flex-wrap: wrap; min-height: 28px; }
.bloc__nom { font-size: var(--sf-t-nota); font-weight: 600; color: var(--sf-tinta); }
.bloc__nom .bloc__unitat { font-weight: 400; }
.bloc__fila { display: flex; align-items: center; gap: var(--sf-e2); margin-top: 6px; }
.bloc__fila .sf-entrada-text { width: 116px; flex: none; font-size: var(--sf-t-cos); }
.bloc__mig, .bloc__unitat { font-size: var(--sf-t-nota); color: var(--sf-gris-fort); }
.bloc__nota { font-size: var(--sf-t-petit); color: var(--sf-gris); line-height: 1.35; margin-top: 6px; }
.bloc__nota:empty { display: none; }
.bloc__nota--error { color: var(--sf-error); font-weight: 500; }
.tol__font { margin-left: auto; font-size: var(--sf-t-nota); color: var(--sf-gris-fort); }
.tol__font:disabled { color: var(--sf-gris); text-decoration: none; cursor: default; }
.tol__canviada { font-size: var(--sf-t-petit); font-weight: 500; color: var(--sf-gris-fort); }
.ma__treu { margin-left: auto; }
@media (max-width: 900px) {
  .tol { border-top: var(--sf-linia) solid var(--sf-filet); }
  .bloc__fila .sf-entrada-text { flex: 1 1 0; width: auto; min-width: 0; }
  .tol { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--sf-e3); }
  .tol .bloc__cap { display: contents; }
  .tol .bloc__fila { grid-column: 1 / -1; }
  .tol__font { grid-column: 1 / -1; grid-row: 3; margin: var(--sf-e3) 0 0; justify-self: start; min-height: 32px; }
  /* Al mòbil, la peça a mà va després de simular, i «Treure» a sota de tot. */
  .ma { border-top: var(--sf-linia) solid var(--sf-filet); display: grid; grid-template-columns: minmax(0, 1fr); }
  .ma .bloc__cap { display: contents; }
  .ma__treu { order: 4; margin: var(--sf-e3) 0 0; justify-self: start; }
  .ma .bloc__fila { order: 2; }
  .ma .bloc__nota { order: 3; }
  .ma .bloc__nom { order: 1; }
}

/* ═══ Simular peces (el peu de la zona) ══════════════════════════════════ */
.afegir { gap: var(--sf-e2) var(--sf-e4); min-height: 56px; padding-top: var(--sf-e2); padding-bottom: var(--sf-e2); }
.afegir__nom { font-size: var(--sf-t-nota); color: var(--sf-gris-fort); white-space: nowrap; }
.afegir .sf-lliscant { flex: 1 1 160px; max-width: 300px; min-width: 120px; }
.afegir__valor { font-size: var(--sf-t-cos); font-weight: 600; color: var(--sf-tinta); font-variant-numeric: tabular-nums; min-width: 6.5ch; text-align: right; }
/* Quan la zona és estreta, el valor es queda al costat del lliscant i el botó baixa a la dreta. */
@media (min-width: 901px) and (max-width: 1139px) {
  .afegir .sf-lliscant { flex-basis: 100px; min-width: 90px; }
}
@media (max-width: 900px) {
  .afegir { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sf-e2) var(--sf-e3); padding-top: var(--sf-e4); padding-bottom: var(--sf-e4); }
  .afegir__nom { grid-row: 1; grid-column: 1; }
  .afegir__valor { grid-row: 1; grid-column: 2; }
  .afegir .sf-lliscant { grid-row: 2; grid-column: 1 / -1; max-width: none; width: 100%; }
  .afegir #simula { grid-row: 3; grid-column: 1 / -1; width: 100%; }
}

/* ═══ El panell ══════════════════════════════════════════════════════════ */
/* Els fills del panell es poden fer estrets: la taula fa scroll a dins seu. */
.panell > * { min-width: 0; }
.grup { gap: var(--sf-e2) var(--sf-e3); }
.grup__nom { font-size: var(--sf-t-nota); color: var(--sf-gris-fort); white-space: nowrap; }
.grup__nota { flex: 1 1 0; min-width: 96px; font-size: var(--sf-t-petit); color: var(--sf-gris); line-height: 1.3; }
.grup__nota:empty { display: none; }
/* Un segment que encara no es pot triar: discontinu, sense tinta. */
.sf-segment:disabled { color: var(--sf-gris); border-style: dashed; background: var(--sf-paper); cursor: not-allowed; }

/* La capacitat: un sol número gran (el Cpk, el de la història) i els altres
   tres en una llista petita al costat. Tot són botons que porten al càlcul. */
.capacitat {
  display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 1.6fr); gap: var(--sf-e2) var(--sf-e5);
  padding: var(--sf-e3) var(--sf-gutter) var(--sf-e3); align-items: start;
}
.comptador {
  display: block; width: 100%; text-align: left; cursor: pointer; font: inherit;
  background: none; border: 0; border-top: var(--sf-linia) solid var(--sf-tinta); border-radius: 0;
  padding: var(--sf-e2) 0 0; color: inherit;
}
.cap__nom { display: block; margin-top: 6px; font-size: var(--sf-t-nota); color: var(--sf-gris-fort); line-height: 1.35; }
.comptador__peu { display: flex; align-items: center; flex-wrap: wrap; gap: 2px var(--sf-e2); margin-top: 4px; font-size: var(--sf-t-petit); min-height: 18px; }
.comptador__abans { color: var(--sf-gris-fort); font-variant-numeric: tabular-nums; }
.comptador:focus-visible { outline-offset: 4px; }
.cap__altres { list-style: none; margin: 0; padding: 0; border-top: var(--sf-linia) solid var(--sf-filet-fort); }
.cap__altres li + li { border-top: var(--sf-linia) solid var(--sf-filet); }
.cap__fila {
  display: grid; grid-template-columns: 3.2ch 4.2ch minmax(0, 1fr); gap: 0 var(--sf-e2); align-items: baseline;
  width: 100%; min-height: 32px; padding: 6px 0; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: 0; font: inherit; font-size: var(--sf-t-nota); color: var(--sf-gris-fort);
}
.cap__sigla { color: var(--sf-gris-fort); }
.cap__valor { color: var(--sf-tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
.cap__desc { color: var(--sf-gris); line-height: 1.3; }
.cap__desc .comptador__abans { white-space: nowrap; }
.cap__fila:focus-visible { outline-offset: -2px; }
@media (hover: hover) {
  .comptador:hover .cap__nom, .cap__fila:hover .cap__desc > span:first-child { color: var(--sf-tinta); text-decoration: underline; text-decoration-color: var(--sf-filet-fort); text-underline-offset: 3px; }
}
@media (max-width: 760px) {
  .capacitat { grid-template-columns: minmax(0, 1fr); gap: var(--sf-e3); }
  .cap__fila { min-height: 44px; }
}

.estat { padding: 0 var(--sf-gutter) var(--sf-e3); font-size: var(--sf-t-nota); color: var(--sf-gris-fort); font-variant-numeric: tabular-nums; }
#estat-fora { color: var(--sf-tinta); font-weight: 600; }

.maquines { padding: 0 var(--sf-gutter) var(--sf-e3); container-type: inline-size; }
.taula-maquines { font-size: var(--sf-t-nota); }
.taula-maquines th { white-space: normal; line-height: 1.25; padding: 6px 6px 6px; }
.taula-maquines td { padding-left: 6px; padding-right: 6px; }
.taula-maquines th .sf-etiq { display: flex; margin-top: 2px; font-size: var(--sf-t-petit); }
.taula-maquines th.n .sf-etiq { justify-content: flex-end; }
.taula-maquines td { padding-top: 6px; padding-bottom: 6px; }
.taula-maquines tbody tr:focus-visible { outline: 2px solid var(--sf-terra); outline-offset: -2px; }
/* La fila triada, en tinta: el terra és per al punt triat del gràfic. */
.taula-maquines tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--sf-tinta); }
.maq__nom { font-weight: 600; }
.maq__afegides { display: block; font-size: var(--sf-t-petit); color: var(--sf-gris); white-space: nowrap; line-height: 1.2; }
.maquines__nota { margin-top: 6px; font-size: var(--sf-t-petit); color: var(--sf-gris); line-height: 1.35; }
@media (max-width: 760px) {
  .col-desv { display: none; }
}
.th__curt { display: none; }
@container (max-width: 519px) {
  .th__llarg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .th__curt { display: inline; }
  .maq__afegides { white-space: normal; }
}
@container (max-width: 479px) {
  .taula-maquines th, .taula-maquines td { padding-left: 4px; padding-right: 4px; }
  .taula-maquines th:last-child, .taula-maquines td:last-child { padding-right: 0; }
}

.pestanya__curt { display: none; }
@media (max-width: 560px) {
  .pestanya__llarg { display: none; }
  .pestanya__curt { display: inline; }
}

/* ── Alarmes ─────────────────────────────────────────────────────────── */
.alarmes__cap { display: flex; align-items: center; gap: var(--sf-e2) var(--sf-e3); flex-wrap: wrap; }
.llista-alarmes { margin-top: var(--sf-e3); }
.llista__grup { display: flex; gap: 4px; font-size: var(--sf-t-petit); font-weight: 600; color: var(--sf-gris-fort); margin: var(--sf-e4) 0 4px; }
.llista__grup:first-child { margin-top: 0; }
.llista__grup span { font-weight: 400; color: var(--sf-gris); }
.llista { list-style: none; margin: 0; padding: 0; border-bottom: var(--sf-linia) solid var(--sf-filet); }
.llista > li { border-top: var(--sf-linia) solid var(--sf-filet); }
.alarma {
  display: grid; gap: 2px; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: 0; padding: 8px 0 9px 10px; color: inherit;
  transition: background-color var(--sf-transicio);
}
.alarma__titol { font-size: var(--sf-t-nota); font-weight: 600; color: var(--sf-tinta); font-variant-numeric: tabular-nums; }
.alarma__titol::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--sf-error); margin: 0 8px 1px 0; vertical-align: middle; }
.alarma__frase { font-size: var(--sf-t-nota); line-height: 1.4; color: var(--sf-gris-fort); }
.alarma[aria-pressed='true'] { background: var(--sf-paper-3); box-shadow: inset 2px 0 0 var(--sf-tinta); }
.alarma[aria-pressed='true'] .alarma__frase { color: var(--sf-tinta); }
.alarma:focus-visible { outline-offset: -2px; }
@media (hover: hover) {
  .alarma:not([aria-pressed='true']):hover { background: var(--sf-paper-2); }
}
.llista__buida { font-size: var(--sf-t-nota); color: var(--sf-gris); padding: var(--sf-e2) 0; }

.regles__titol { font-size: var(--sf-t-nota); font-weight: 600; margin: var(--sf-e6) 0 4px; }
.regles { list-style: none; margin: 0; padding: 0; border-bottom: var(--sf-linia) solid var(--sf-filet); }
.regla { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-e3); border-top: var(--sf-linia) solid var(--sf-filet); min-height: 40px; }
.regla__casella { font-size: var(--sf-t-nota); gap: 10px; padding: 4px 0; min-width: 0; }
.regla__num { font-size: var(--sf-t-nota); font-weight: 600; font-variant-numeric: tabular-nums; width: 2ch; text-align: right; flex: none; color: var(--sf-tinta); }
.regla__nom { color: var(--sf-gris-fort); line-height: 1.3; }
.regla__compte { font-size: var(--sf-t-nota); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; color: var(--sf-tinta); }
.regla__compte--zero { font-weight: 400; color: var(--sf-gris); }
.regles__nota { margin-top: var(--sf-e3); }

/* ── Com es calcula ──────────────────────────────────────────────────── */
.calcul__titol { margin: var(--sf-e6) 0 var(--sf-e2); }
.calcul__titol:first-child { margin-top: 0; }
.calcul .sf-text + .sf-text, .formula + .sf-text { margin-top: var(--sf-e3); }
.formula { font-family: var(--sf-mono); font-size: var(--sf-t-nota); margin-top: 6px; padding: 8px 10px; background: var(--sf-paper-2); color: var(--sf-gris-fort); overflow-x: auto; white-space: nowrap; }
.formula + .formula { margin-top: 2px; }
.formula b { color: var(--sf-tinta); font-weight: 600; }
.calcul__nota { margin-top: var(--sf-e3); }
.calcul__constants { margin-top: var(--sf-e2); max-width: 420px; font-size: var(--sf-t-nota); }
.calcul :target, .calcul [id^='calcul-']:focus { scroll-margin-top: var(--sf-e4); }

/* ── El que encerta i el que no ─────────────────────────────────────── */
.revisio { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--sf-e3); align-items: start; }
.revisio .sf-etiq { justify-self: start; }
@media (max-width: 420px) { .revisio { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* ── Peu del panell ──────────────────────────────────────────────────── */
.peu { row-gap: 6px; flex-wrap: nowrap; }
.peu .sf-botonera { flex: none; }
.peu__nota { flex: 1 1 0; min-width: 0; font-size: var(--sf-t-petit); line-height: 1.35; }
@media (max-width: 560px) {
  .peu { flex-wrap: wrap; }
  .peu__nota { flex-basis: 100%; }
}

/* ── «Prova això» (de _comu, v2) ────────────────────────────────────────
   Com a les altres demos amb una barra d'eines a la zona principal: a partir de
   901 px, comu.js posa la guia dins de #guia-lloc, sota la barra d'eines
   (iniciar({ guia: { lloc } })), amb l'aspecte de la carcassa. Al mòbil, la
   franja de baix. «Com funciona» ja és a la barra de dalt: aquí no es repeteix. */
.guia-lloc .sf-guia__peu .sf-boto--text { display: none; }
/* Al pas 3, la guia centra la primera alarma: amb aquest marge el selector de regles queda a la vista. */
.llista-alarmes > .llista:first-of-type > li:first-child { scroll-margin-top: 160px; }

/* ═══ L'informe imprès ═══════════════════════════════════════════════════ */
@media print {
  .zona-control { display: block; }
  .informe { display: block; }
  .llenc-control { height: auto; overflow: visible; background: none; break-inside: avoid; }
  .grafic { position: static; width: 100%; height: auto; }
  #grafic-control { cursor: auto; }
  .histo { padding: 2mm 0 0; break-inside: avoid; }
  .histo__llenc { height: auto; }
  .histo__llegenda { font-size: 8pt; }
  .grafic text { font-size: 11px; }
  .informe__titol { font-size: 13pt; font-weight: 600; letter-spacing: -.01em; }
  /* El títol de la barra en una línia; les dades de l'informe en dues columnes. */
  .sf-barra { padding-bottom: 3mm; margin-bottom: 3mm; }
  .sf-barra__titol { white-space: nowrap; flex: none; }
  .informe__dades { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1.4fr); gap: 1mm 4mm; margin: 1.5mm 0 3mm; font-size: 9pt; }
  .informe__dades dt { color: #555; }
  .informe-cos { margin-top: 4mm; font-size: 9pt; }
  .informe__h { font-size: 10.5pt; font-weight: 600; margin: 4mm 0 1.5mm; }
  .informe__taula { font-size: 9pt; }
  .informe__taula th, .informe__taula td { padding: 1.5mm 2mm; }
  .informe__grup { font-size: 9pt; font-weight: 600; color: #444; margin: 2.5mm 0 0; }
  .informe__alarmes { padding-left: 5mm; }
  .informe__alarmes li { margin-top: 1.2mm; break-inside: avoid; }
  .informe__nota { margin-top: 3mm; color: #444; }
}