/* ─────────────────────────────────────────────────────────────────────────
 * Manteniment predictiu: els estils propis. La resta és de ../_comu/comu.css.
 * El llenguatge és el d'un registrador de tendències: a l'esquerra les
 * traces (la vida restant i, a sota, les franges dels sensors) amb un sol eix
 * de temps; a la dreta, la lectura de cada traça al cicle triat. Línies fines
 * i la línia del cicle triat en terra (l'única cosa en terra).
 * ───────────────────────────────────────────────────────────────────────── */

:root {
  --mp-col: 228px;         /* la columna de les lectures */
  --mp-banda: #e2e2dd;     /* la banda del 80 % */
  --mp-franja: #efefeb;    /* la franja normal dels sensors */
}

/* ═══ La zona ═══════════════════════════════════════════════════════════ */
/* El control i el peu (amb la nota del motor triat) queden sempre a la vista; si no hi cap tot, el que es
   desplaça és el registre del mig. */
.mp-zona { grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }

.mp-control {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto var(--mp-col);
  grid-template-areas:
    "motor cicle . pas planificar"
    "lliscant lliscant lliscant lliscant lliscant";
  align-items: center; column-gap: var(--sf-e5);
  padding: var(--sf-e3) 0 0 var(--sf-gutter);
}
.mp-motor { grid-area: motor; display: flex; align-items: center; gap: var(--sf-e3); min-width: 0; }
.mp-motor__titol { display: flex; align-items: baseline; gap: 8px; font-size: var(--sf-t-h2); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.mp-motor__num { font-family: var(--sf-serif); font-weight: 400; font-size: 36px; letter-spacing: -.01em; font-variant-numeric: lining-nums; }
.mp-cicle { grid-area: cicle; font-size: var(--sf-t-cos); color: var(--sf-gris-fort); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mp-cicle b { color: var(--sf-tinta); font-weight: 600; }
.mp-cicle__que { display: block; margin-top: 2px; font-size: var(--sf-t-petit); color: var(--sf-gris); }
.mp-pas { grid-area: pas; display: flex; gap: 6px; }
.mp-pas__fletxa { width: var(--sf-control-petit); padding: 0; font-size: 19px; font-weight: 500; }
.mp-pas__fletxa:disabled { color: var(--sf-gris-suau); cursor: not-allowed; }
.mp-planificar { grid-area: planificar; padding: 0 var(--sf-gutter) 0 var(--sf-e4); }
.mp-planificar .sf-boto { width: 100%; }

/* El lliscant fa d'eix de temps: app.js el col·loca perquè el cercle quedi
   just a sobre de la línia del cicle triat. */
.mp-lliscant { grid-area: lliscant; position: relative; height: 28px; margin: var(--sf-e2) 0 0 calc(-1 * var(--sf-gutter)); }
.mp-lliscant .sf-lliscant { position: absolute; top: 0; left: 0; width: 100%; }
#temps::-webkit-slider-thumb { border-color: var(--sf-terra); border-width: 2px; }
#temps::-moz-range-thumb { border-color: var(--sf-terra); border-width: 2px; }

/* ── El registre: traces a l'esquerra, lectures a la dreta ───────────── */
/* La fila del gràfic s'estira fins a omplir el registre, però mai fa menys que la lectura de la dreta (ni
   que els 300 px del gràfic): així la lectura no es desborda mai sobre els sensors. */
.mp-registre { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.mp-fila-grafic { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) var(--mp-col); min-width: 0; }
.mp-registre > .mp-canals { flex: none; }
.mp-llenc { background: var(--sf-paper); min-width: 0; min-height: 300px; }
.mp-grafic { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.mp-carregant {
  position: absolute; left: var(--sf-gutter); top: var(--sf-e3);
  padding: 6px 10px; background: var(--sf-paper); border: 1px solid var(--sf-filet-fort);
  font-size: var(--sf-t-nota); color: var(--sf-gris-fort);
}

.mp-grafic text, .mp-canal__svg text, .mp-punts__svg text, .mp-hist__svg text { font-family: var(--sf-sans); }
.g-text { font-size: 13px; font-weight: 500; fill: var(--sf-gris); font-variant-numeric: tabular-nums; }
.g-text--fort { fill: var(--sf-tinta); font-weight: 600; }
.g-halo { paint-order: stroke; stroke: var(--sf-paper); stroke-width: 4px; stroke-linejoin: round; }
.g-graella { stroke: var(--sf-filet); stroke-width: 1; }
.g-base { stroke: var(--sf-tinta); stroke-width: 1; }
.g-sostre { stroke: var(--sf-filet-fort); stroke-width: 1; stroke-dasharray: 2 3; }
.g-marca { stroke: var(--sf-gris-suau); stroke-width: 1; }
.g-ratlla { stroke: var(--sf-filet-fort); stroke-width: 1; }
.g-fi { stroke: var(--sf-gris-suau); stroke-width: 1; }
.g-banda { fill: var(--mp-banda); }
.g-p50 { fill: none; stroke: var(--sf-tinta); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.g-real { stroke: var(--sf-gris); stroke-width: 1.25; stroke-dasharray: 5 4; }
.g-llindar { stroke: var(--sf-tinta); stroke-width: 1; stroke-dasharray: 1 3; }
.g-avis { stroke: var(--sf-tinta); stroke-width: 1; }
.g-fallada { stroke: var(--sf-tinta); stroke-width: 1.75; }
.g-parada { stroke: var(--sf-tinta); stroke-width: 1.25; stroke-dasharray: 5 3; }
.g-creu { fill: none; stroke: var(--sf-tinta); stroke-width: 2; stroke-linecap: square; }
.g-rombe { fill: var(--sf-paper); stroke: var(--sf-tinta); stroke-width: 1.5; }
.g-cota { stroke: var(--sf-gris-fort); stroke-width: 1; }
.g-ara { stroke: var(--sf-terra); stroke-width: 1.5; }
.g-biga { stroke: var(--sf-tinta); stroke-width: 1.5; }
.g-punt { fill: var(--sf-paper); stroke: var(--sf-tinta); stroke-width: 1.75; }
.g-punt-real { fill: var(--sf-gris); }
.g-passa { stroke: var(--sf-gris-suau); stroke-width: 1; stroke-dasharray: 2 3; pointer-events: none; }

/* ── Les lectures del gràfic: la vida estimada, la real i l'avís ─────── */
.mp-lectura {
  display: grid; align-content: start; gap: var(--sf-e3);
  padding: var(--sf-e3) var(--sf-gutter) var(--sf-e3) var(--sf-e4);
  border-left: var(--sf-linia) solid var(--sf-filet);
  min-width: 0;
}
/* El nom a dalt, la xifra i, a sota, el marge o l'origen amb l'etiqueta al costat */
.mp-lectura .sf-comptador__nom { margin: 0 0 6px; }
.mp-xifra-sub {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: 6px;
  font-size: var(--sf-t-nota); line-height: 1.35; color: var(--sf-gris-fort); font-variant-numeric: tabular-nums;
}
.mp-xifra-sub:empty { display: none; }
.mp-estat {
  border-top: var(--sf-linia) solid var(--sf-tinta); padding-top: var(--sf-e2);
  font-size: var(--sf-t-nota); line-height: 1.45; color: var(--sf-gris-fort);
}
.mp-estat b { color: var(--sf-tinta); font-weight: 600; }
.mp-estat p .sf-etiq { margin-left: 2px; }
.mp-estat > .sf-etiq { margin-top: 6px; }
.mp-estat[data-estat='actiu'] { border-top-width: 3px; padding-top: 6px; }
.mp-estat[data-estat='dubte'] { border-top: 3px solid var(--sf-dubte); padding-top: 6px; }
.mp-revisa { margin-top: var(--sf-e2); }
.mp-revisat { margin-top: 6px; }
.mp-revisat .sf-boto--text { font-size: inherit; font-weight: 600; color: var(--sf-tinta); }

/* ── Els sensors: una franja per canal, amb l'eix de temps del gràfic ── */
.mp-canals { display: grid; border-top: var(--sf-linia) solid var(--sf-filet); min-width: 0; }
.mp-canal {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--mp-col);
  grid-template-areas: "cap lectura" "svg lectura";
  min-width: 0;
}
.mp-canal + .mp-canal .mp-canal__cap { padding-top: 2px; }
.mp-canal__cap {
  grid-area: cap; display: flex; align-items: baseline; gap: var(--sf-e2); min-width: 0;
  padding: 6px var(--mp-x1, 12px) 0 var(--mp-x0, var(--sf-gutter));
  font-size: var(--sf-t-petit); line-height: 17px; color: var(--sf-gris); white-space: nowrap;
}
.mp-canal__simbol { flex: none; font-weight: 700; color: var(--sf-tinta); }
.mp-canal__nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mp-canal__svg { grid-area: svg; display: block; width: 100%; height: 30px; min-width: 0; }
.mp-canal--salut .mp-canal__svg { height: 34px; }
.mp-canal__lectura {
  grid-area: lectura; display: flex; flex-wrap: wrap; align-items: baseline; align-content: center; gap: 0 var(--sf-e2);
  padding: 4px var(--sf-gutter) 4px var(--sf-e4);
  border-left: var(--sf-linia) solid var(--sf-filet);
  font-size: var(--sf-t-petit); color: var(--sf-gris); min-width: 0;
}
.mp-canal__valor { font-size: var(--sf-t-cos); font-weight: 600; color: var(--sf-tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp-canal__xifra { font-family: var(--sf-serif); font-size: 26px; line-height: 1; color: var(--sf-tinta); font-variant-numeric: lining-nums; white-space: nowrap; }
.mp-canal__xifra small { font-family: var(--sf-sans); font-size: var(--sf-t-nota); color: var(--sf-gris); }
.mp-canal__fora { flex: 1 0 100%; font-weight: 600; color: var(--sf-tinta); }
.c-franja { fill: var(--mp-franja); }
.c-punts { fill: none; stroke: var(--sf-gris); stroke-width: 2.2; stroke-linecap: round; opacity: .55; }
.c-mitjana { fill: none; stroke: var(--sf-tinta); stroke-width: 1.25; stroke-linejoin: round; }
.c-base { stroke: var(--sf-filet); stroke-width: 1; }
.c-salut { fill: none; stroke: var(--sf-tinta); stroke-width: 1.5; stroke-linejoin: round; }
.c-esdeveniment { stroke: var(--sf-filet-fort); stroke-width: 1; }

/* ── El peu de la zona: la llegenda i la nota ────────────────────────── */
.mp-peu { gap: var(--sf-e2) var(--sf-e5); }
.mp-llegenda { gap: var(--sf-e2) var(--sf-e4); }
.mp-llegenda i.ll-estimacio { border-top: 2px solid var(--sf-tinta); }
.mp-llegenda i.ll-banda { width: 16px; height: 10px; border: 0; background: var(--mp-banda); }
.mp-llegenda i.ll-real { border-top: 1.5px dashed var(--sf-gris); }
.mp-llegenda i.ll-ratllat {
  width: 16px; height: 10px; border: 0;
  background: repeating-linear-gradient(-45deg, var(--sf-filet-fort) 0 1px, transparent 1px 4px);
  box-shadow: inset 0 0 0 1px var(--sf-filet);
}
.mp-llegenda i.ll-franja { width: 16px; height: 10px; border: 0; background: var(--mp-franja); box-shadow: inset 0 0 0 1px var(--sf-filet); }
.mp-llegenda i.ll-ara { width: 0; height: 14px; border-top: 0; border-left: 2px solid var(--sf-terra); }
.mp-nota { font-size: var(--sf-t-nota); color: var(--sf-gris-fort); text-wrap: pretty; }
.mp-nota .sf-boto--text { font-size: inherit; font-weight: 600; color: var(--sf-tinta); text-decoration-color: var(--sf-tinta); }

/* ═══ El panell ═════════════════════════════════════════════════════════ */
.mp-panell { grid-template-rows: auto minmax(0, 1fr); }
/* position: relative, perquè els textos amagats (absoluts) de la taula quedin dins del panell
   i no allarguin la pàgina, que a l'ordinador no ha de desplaçar-se mai */
.mp-panell > .sf-desplacable { min-width: 0; position: relative; }
.mp-curt { display: none; }
.mp-cap-vista { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-e3); flex-wrap: wrap; }
.mp-intro { margin-top: var(--sf-e2); }
.mp-bloc { margin-top: var(--sf-e3); }
.mp-gris { color: var(--sf-gris); }
.mp-h4 {
  margin: var(--sf-e8) 0 var(--sf-e2); padding-top: var(--sf-e3);
  border-top: var(--sf-linia) solid var(--sf-tinta);
  font-size: var(--sf-t-h3); font-weight: 600; letter-spacing: -.015em; line-height: 1.3;
}
.mp-subtitol { margin: var(--sf-e5) 0 4px; font-size: var(--sf-t-cos); font-weight: 600; }
.mp-sub { display: block; margin-top: 2px; font-size: var(--sf-t-petit); line-height: 1.3; color: var(--sf-gris); font-weight: 400; }
.mp-vista .sf-taula-caixa { margin-top: var(--sf-e2); }
.mp-vista svg { max-width: 100%; }

/* El motor triat es marca en negre: el terra és només per al cicle triat */
.mp-panell .sf-taula tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--sf-tinta); }

/* ── Flota ──────────────────────────────────────────────────────────── */
.mp-grups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-e4); margin-top: var(--sf-e4); }
.mp-grup { display: flex; align-items: baseline; gap: 8px; padding-top: 6px; border-top: var(--sf-linia) solid var(--sf-tinta); }
.mp-grup__n { font-family: var(--sf-serif); font-size: 30px; line-height: 1; font-variant-numeric: lining-nums; }
.mp-grup__nom { font-size: var(--sf-t-nota); color: var(--sf-gris-fort); }
.mp-grups-nota { margin-top: var(--sf-e2); }
.mp-origens { margin-top: var(--sf-e3); }
.mp-origens .sf-etiq { margin-right: 2px; }
.mp-flota th { white-space: normal; line-height: 1.25; }
.mp-flota th, .mp-flota td { padding-left: 6px; padding-right: 6px; }
.mp-flota td { padding-top: 7px; padding-bottom: 7px; }
.mp-ordre { color: var(--sf-gris); width: 1%; }
.mp-motor-cel b { font-weight: 600; }
.mp-vida { font-weight: 600; }
.mp-err { margin-left: 6px; font-size: var(--sf-t-petit); color: var(--sf-gris-fort); font-weight: 600; }
.mp-marques:empty { display: none; }
.mp-marca {
  display: inline-block; margin-left: 8px; padding: 0 5px;
  border: var(--sf-linia) solid var(--sf-filet-fort); border-radius: var(--sf-radi);
  font-size: var(--sf-t-petit); line-height: 18px; font-weight: 500; color: var(--sf-gris-fort); white-space: nowrap;
}
.mp-nomes-mobil { display: none; }
.mp-nomes-paper { display: none; }
.mp-pont { margin-top: var(--sf-e2); }
/* A la fila triada (fons gris), el text secundari una mica més fosc perquè passi de 4,5:1 */
.mp-panell .sf-taula tbody tr[aria-selected='true'] :is(.mp-ordre, .mp-sub, .mp-err) { color: var(--sf-gris-fort); }

/* ── Parada ─────────────────────────────────────────────────────────── */
.mp-controls { display: flex; flex-wrap: wrap; gap: var(--sf-e4) var(--sf-e8); margin-top: var(--sf-e4); }
.mp-controls .sf-camp__nom { justify-content: flex-start; align-items: center; }
.mp-parada { display: grid; justify-items: start; gap: var(--sf-e2); margin-top: var(--sf-e5); padding-top: var(--sf-e3); border-top: var(--sf-linia) solid var(--sf-tinta); }
.mp-parada__cicle { display: flex; align-items: baseline; gap: 10px; line-height: 1; }
.mp-parada__paraula { font-size: var(--sf-t-h2); font-weight: 600; letter-spacing: -.03em; }
.mp-parada__num { font-family: var(--sf-serif); font-size: 60px; letter-spacing: -.01em; font-variant-numeric: lining-nums; }
.mp-parada__data { display: flex; align-items: center; flex-wrap: wrap; gap: 6px var(--sf-e3); font-size: var(--sf-t-h2); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.mp-parada__calcul .sf-etiq { margin-right: 2px; }
.mp-ja { justify-self: stretch; }
.mp-parada-real { display: grid; gap: var(--sf-e2); margin-top: var(--sf-e5); }
.mp-parada-real__titol { display: flex; align-items: center; gap: var(--sf-e2); font-size: var(--sf-t-cos); font-weight: 600; }
.mp-ics { display: grid; justify-items: start; gap: 6px; margin-top: var(--sf-e5); }
.mp-ics__botons { display: flex; flex-wrap: wrap; gap: var(--sf-e2); }
.mp-ordres { margin-top: var(--sf-e6); padding-top: var(--sf-e3); border-top: var(--sf-linia) solid var(--sf-filet); }
.mp-ordres > .sf-nota { margin-top: var(--sf-e2); }
.mp-ordres__titol { display: flex; align-items: center; gap: var(--sf-e2); margin: 0; }
.mp-treu-cel { width: 1%; text-align: right; }
.mp-taula-ordres td:first-child { white-space: nowrap; }
.mp-treu-cel .sf-boto--text { font-size: var(--sf-t-nota); }

/* ── Com de bé encerta ──────────────────────────────────────────────── */
.mp-xifres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-e4); margin-top: var(--sf-e4); }
.mp-xifres .sf-xifra { font-size: 36px; }
.mp-mesures { margin-top: var(--sf-e4); border-top: var(--sf-linia) solid var(--sf-filet); }
.mp-mesura { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sf-e4); padding: 7px 0; border-bottom: var(--sf-linia) solid var(--sf-filet); font-size: var(--sf-t-cos); line-height: 1.4; }
.mp-mesura dt { color: var(--sf-gris-fort); }
.mp-mesura dd { margin: 0; font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mp-punts { position: relative; margin-top: var(--sf-e3); min-width: 0; }
.mp-punts__svg { display: block; width: 100%; }
.mp-info {
  position: absolute; z-index: 2; pointer-events: none;
  padding: 6px 10px; border-radius: var(--sf-radi);
  background: var(--sf-tinta); color: var(--sf-paper); font-size: var(--sf-t-nota); white-space: nowrap;
}
.p-franja { fill: var(--mp-franja); }
.p-diagonal { stroke: var(--sf-tinta); stroke-width: 1; }
.p-punt { fill: var(--sf-paper); stroke: var(--sf-gris-fort); stroke-width: 1.25; }
.p-triat { fill: var(--sf-tinta); stroke: var(--sf-paper); stroke-width: 1.5; }
.mp-err-cel { font-weight: 600; }
.mp-politica { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-e5); margin-top: var(--sf-e4); }
.mp-politica__titol { margin-bottom: 8px; font-size: var(--sf-t-cos); font-weight: 600; color: var(--sf-tinta); }
.mp-politica .sf-text { margin-top: var(--sf-e2); font-size: var(--sf-t-nota); line-height: 1.45; }

/* ── Com es calcula ─────────────────────────────────────────────────── */
.mp-passos { margin-top: var(--sf-e4); }
.mp-passos .sf-text { max-width: none; }
.mp-etiquetes { display: flex; flex-wrap: wrap; gap: 4px var(--sf-e3); margin-top: 6px; }
.mp-hist { margin-top: var(--sf-e3); min-width: 0; }
.mp-hist__svg { display: block; width: 100%; }
.h-linies { fill: none; stroke: #b9b9b4; stroke-width: 1; opacity: .5; }
.h-triat { fill: none; stroke: var(--sf-tinta); stroke-width: 2; stroke-linejoin: round; }
.mp-pesos .mp-clau b { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.mp-nom-sensor { min-width: 12ch; }
.mp-imp__barra { display: inline-block; vertical-align: middle; height: 6px; margin-right: 8px; background: var(--sf-gris-suau); }

/* ═══ «Prova això» a l'ordinador ═══════════════════════════════════════
 * comu.js la posa a #guia-lloc, a baix del panell (iniciar({ guia: { lloc } })):
 * una franja que ocupa el seu lloc i no tapa res del motor. Aquí només hi ha el
 * filet que la separa de la vista. Al mòbil el lloc queda buit.
 */
@media (min-width: 901px) {
  .mp-panell { grid-template-rows: auto minmax(0, 1fr) auto; }
  .mp-guia-lloc > .sf-guia { border-bottom: 0; border-top: var(--sf-linia) solid var(--sf-filet); }
}

/* ═══ Pantalles baixes de portàtil (1280×720, 1366×768, 1024×768) ═══════ */
@media (min-width: 901px) and (max-height: 820px) {
  .mp-control { padding-top: var(--sf-e2); }
  .mp-lliscant { margin-top: 4px; }
  .mp-llenc { min-height: 200px; }
  .mp-llegenda { gap: var(--sf-e1) var(--sf-e3); font-size: var(--sf-t-petit); }
  .mp-estat { font-size: var(--sf-t-petit); }
  .mp-lectura { gap: var(--sf-e2); padding-top: var(--sf-e2); padding-bottom: var(--sf-e2); }
  .mp-lectura .sf-comptador__nom { margin-bottom: 2px; }
  .mp-lectura .sf-xifra { font-size: 32px; }
  .mp-xifra-sub { margin-top: 2px; }
  .mp-estat { line-height: 1.35; padding-top: 6px; }
  .mp-canal__cap { padding-top: 3px; line-height: 15px; }
  .mp-canal + .mp-canal .mp-canal__cap { padding-top: 1px; }
  .mp-canal__svg { height: 20px; }
  .mp-canal--salut .mp-canal__svg { height: 24px; }
  .mp-canal__lectura { padding-top: 1px; padding-bottom: 1px; line-height: 1.3; }
  .mp-canal__xifra { font-size: 22px; }
}

/* ═══ Pantalles estretes ═══════════════════════════════════════════════ */
@media (max-width: 1180px) and (min-width: 901px) {
  :root { --mp-col: 196px; }
  .mp-control {
    grid-template-columns: auto minmax(0, 1fr) var(--mp-col);
    grid-template-areas:
      "motor . planificar"
      "cicle pas pas"
      "lliscant lliscant lliscant";
    row-gap: var(--sf-e2);
  }
  .mp-pas { justify-self: end; padding-right: var(--sf-gutter); }
}

/* Al mòbil la zona es desfà en una columna: motor, cicle, lliscant, botons,
   gràfic, lectures, «Planificar la parada», sensors i peu. */
@media (max-width: 900px) {
  .mp-zona { display: flex; flex-direction: column; overflow: visible; }
  .mp-control, .mp-registre, .mp-fila-grafic { display: contents; }
  .mp-motor { order: 1; padding: var(--sf-e4) var(--sf-gutter) 0; }
  .mp-cicle { order: 2; padding: var(--sf-e3) var(--sf-gutter) 0; }
  .mp-lliscant { order: 3; margin: 2px 0 0; height: 44px; }
  .mp-pas { order: 4; padding: 4px var(--sf-gutter) var(--sf-e3); }
  .mp-pas__avis { flex: 1 1 auto; }
  .mp-llenc { order: 5; height: 300px; }
  .mp-lectura {
    order: 6; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-e4) var(--sf-e4);
    padding: var(--sf-e4) var(--sf-gutter); border-left: 0; border-top: var(--sf-linia) solid var(--sf-filet);
  }
  .mp-lectura .sf-xifra { font-size: 32px; }
  .mp-estat { grid-column: 1 / -1; }
  .mp-planificar { order: 7; padding: 0 var(--sf-gutter) var(--sf-e4); }
  .mp-canals { order: 8; padding-bottom: var(--sf-e3); }
  .mp-canal { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cap" "lectura" "svg"; }
  .mp-canal__cap { flex-wrap: wrap; padding: var(--sf-e3) var(--sf-gutter) 0; white-space: normal; }
  .mp-canal__nom { overflow: visible; }
  .mp-canal__lectura { border-left: 0; padding: 2px var(--sf-gutter) 4px; }
  .mp-canal__fora { flex: none; }
  .mp-peu { order: 9; }
  /* L'enllaç de la nota va en una línia a part: té els 44 px per al dit sense obrir l'interlineat del paràgraf */
  .mp-nota .sf-boto--text { display: flex; width: fit-content; align-items: center; min-height: 44px; }
}
@media (max-width: 900px) and (pointer: coarse) {
  .mp-pas .sf-eina, .mp-pas .sf-boto { height: 44px; min-height: 44px; }
}

@media (max-width: 760px) {
  .mp-llarg { display: none; }
  .mp-curt { display: inline; }
  .mp-ample { display: none; }
  /* Les capçaleres de les ordres poden fer dues línies: així «Treure» hi cap sense desplaçar la taula */
  .mp-taula-ordres th { white-space: normal; }
  .mp-taula-ordres td { white-space: nowrap; }
  .mp-taula-ordres th, .mp-taula-ordres td { padding-left: 6px; padding-right: 6px; }
  .mp-taula-ordres th:first-child, .mp-taula-ordres td:first-child { padding-left: 0; }
  .mp-taula-ordres th:last-child, .mp-taula-ordres td:last-child { padding-right: 0; }
  .mp-nomes-mobil { display: block; }
  /* Al telèfon, el motor i la vida estimada fan dues línies i la vida real una: totes a la mateixa ratlla */
  .mp-flota td { vertical-align: baseline; }
  /* La columna de l'ordre s'amaga: la marca de la fila triada passa a la del motor */
  .mp-flota tbody tr[aria-selected='true'] td.mp-motor-cel { box-shadow: inset 2px 0 0 var(--sf-tinta); }
  .mp-xifres .sf-xifra { font-size: 28px; }
  .mp-politica { grid-template-columns: minmax(0, 1fr); }
  .mp-parada__num { font-size: 52px; }
}

/* ═══ Impressió ═════════════════════════════════════════════════════════ */
/* El motor (gràfic, xifres i sensors) cap a la primera pàgina; de la flota, els 20 primers i una línia que
   diu que la resta és al CSV; les ordres de treball s'imprimeixen sense els botons. */
@media print {
  .mp-lliscant, .mp-pas, .mp-planificar, .mp-ics, #baixa-flota, #baixa-ordres, .mp-nota .sf-boto, .mp-revisa,
  .mp-taula-ordres th:last-child, .mp-treu-cel { display: none !important; }
  .mp-zona, .mp-registre { overflow: visible; }
  .mp-llenc { height: 250px; min-height: 0; }
  .mp-fila-grafic, .mp-canals { break-inside: avoid; }
  .mp-canal__svg { height: 20px; }
  .mp-canal--salut .mp-canal__svg { height: 24px; }
  .mp-canal__cap { padding-top: 2px; line-height: 15px; }
  .mp-canal__lectura { padding-top: 0; padding-bottom: 0; }
  #taula-flota tbody tr:nth-child(n+21) { display: none; }
  .mp-nomes-paper { display: block; margin-top: var(--sf-e2); }
  .mp-panell .sf-pestanyes { display: none; }
}