/* On perd hores la vostra empresa · el que és d'aquesta app i de cap altra.
   Tot el que és comú (barra, botons, pestanyes, etiquetes…) és a ../_comu/comu.css.

   El mapa és un dibuix tècnic: tinta sobre blanc, filets d'1 px, xifres en Bodoni. Els salts
   van en tinta (mai en vermell); el terra és només per a la troballa triada i per al focus. */

:root { --opd-nivells-w: 88px; }

/* ═══ Disposició ═════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  .opd { grid-template-columns: minmax(0, 1fr) clamp(500px, 40.5vw, 600px); }
}
/* Una sola columna que no creix amb el mapa: el mapa fa scroll dins de la caixa. */
.opd-zona { grid-template-rows: auto auto auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); }
.opd-guia-lloc { min-width: 0; }
.opd-panell { display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
.opd-estat { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); min-height: 0; min-width: 0; }

/* ── La barra d'eines del mapa ───────────────────────────────────────── */
.opd-eines { gap: var(--sf-e3) var(--sf-e4); }
.opd-reinicia { font-size: var(--sf-t-nota); }
.opd-reinicia:disabled { color: var(--sf-gris); text-decoration: none; cursor: default; }

/* ── Comptadors: a l'ordinador, la xifra a l'esquerra i el nom al costat ─ */
.opd-comptadors .opd-c-nose { margin-top: 2px; }
/* L'etiqueta va al final del text, a la mateixa línia, i no en una de sola. */
.opd-comptadors .sf-comptador__nom { display: block; }
.opd-comptadors .sf-comptador__nom .sf-etiq { display: inline-flex; vertical-align: baseline; margin-left: 2px; white-space: nowrap; }
@media (min-width: 761px) {
  /* Les columnes, a la mida del text de cada una: les hores en tenen més. */
  .opd-comptadors {
    padding: 10px var(--sf-gutter) 12px; gap: 10px 24px;
    grid-template-columns: minmax(0, 28fr) minmax(0, 38fr) minmax(0, 34fr);
  }
  .opd-comptadors .sf-comptador { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sf-e3); align-items: start; padding-top: 8px; }
  .opd-comptadors .sf-xifra { grid-row: 1 / span 2; font-size: 36px; line-height: .95; }
  .opd-comptadors .sf-comptador__nom { margin-top: 0; line-height: 1.3; }
  /* «I 1 lloc on no sabeu les hores»: d'esquerra a dreta, sota la xifra, perquè l'etiqueta hi càpiga. */
  .opd-comptadors .opd-c-nose { grid-column: 1 / -1; margin-top: 4px; }
}
.opd-comptadors .sf-xifra small { margin-left: 3px; }
.opd-comptadors .sf-comptador { position: relative; }
/* El nom curt només al mòbil; el llarg hi queda com a nom accessible. */
.opd-c-curt { display: none; }
.opd-comptadors .opd-c-abans { margin-top: 2px; color: var(--sf-gris); font-variant-numeric: tabular-nums; }
@media (min-width: 761px) { .opd-comptadors .opd-c-abans { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .opd-c-llarg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .opd-c-curt { display: inline; }
}

/* ═══ El llenç i el mapa ═════════════════════════════════════════════════ */
.opd-llenc { background: var(--sf-paper); min-width: 0; }
.opd-mapa-fins, .opd-arrossega { display: none; }
.opd-mapa-caixa {
  position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain;
  padding: 6px 12px 8px var(--sf-gutter);
}
.opd-mapa { position: relative; display: flex; align-items: flex-start; width: max-content; }
.opd-svg { flex: none; display: block; max-width: none; overflow: visible; font-family: var(--sf-sans); }

/* La columna dels nivells: fixa a l'esquerra quan el mapa es desplaça. */
.opd-nivells {
  position: sticky; left: 0; z-index: 2; flex: none; width: var(--opd-nivells-w);
  background: var(--sf-paper); border-bottom: var(--sf-linia) solid var(--sf-filet);
}
.opd-nivells__cap {
  position: absolute; left: 0; top: 0; right: 0; display: flex; align-items: flex-end;
  padding-bottom: 6px; font-size: var(--sf-t-petit); line-height: 1.2; color: var(--sf-gris);
}
.opd-nivell {
  position: absolute; left: 0; right: 0; margin: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 7px 10px 5px 0; border: 0; border-top: var(--sf-linia) solid var(--sf-filet);
  border-right: var(--sf-linia) solid var(--sf-filet);
  background: var(--sf-paper); color: var(--sf-tinta); text-align: left; cursor: pointer;
  font: inherit;
}
.opd-nivell__n { font-family: var(--sf-serif); font-size: 22px; line-height: 1; letter-spacing: -.01em; font-variant-numeric: lining-nums; white-space: nowrap; }
.opd-nivell__nom { font-size: var(--sf-t-petit); line-height: 1.2; color: var(--sf-gris-fort); }
.opd-nivell__nom--curt { display: none; }
.opd-nivell[aria-expanded='true'] .opd-nivell__nom { color: var(--sf-tinta); text-decoration: underline; text-underline-offset: 3px; }
.opd-nivell:focus-visible { outline-offset: -3px; }

/* ── L'SVG ─────────────────────────────────────────────────────────── */
.opd-svg .m-franja { stroke: var(--sf-filet); stroke-width: 1; }
.opd-svg .m-col { fill: var(--sf-gris); font-size: 13px; }
.opd-svg .m-node { cursor: pointer; }
.opd-svg .m-node__caixa { fill: var(--sf-paper); stroke: var(--sf-gris-suau); stroke-width: 1; transition: stroke var(--sf-transicio); }
.opd-svg .m-node--fort .m-node__caixa { stroke: var(--sf-tinta); stroke-width: 1.5; }
.opd-svg .m-node__nom { fill: var(--sf-tinta); font-size: 14px; font-weight: 500; letter-spacing: -.005em; }
.opd-svg .m-node__tipus { fill: var(--sf-gris); font-size: 13px; }
.opd-svg .m-client__text { fill: var(--sf-gris); font-size: 14px; }
.opd-svg .m-toc-node { fill: transparent; stroke: none; }
.opd-svg .m-banda .m-node__caixa { stroke: var(--sf-tinta); stroke-width: 1.5; }
.opd-svg .m-banda__text { fill: var(--sf-tinta); font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.opd-svg .m-banda--pendent .m-node__caixa { stroke: var(--sf-gris); stroke-width: 1; stroke-dasharray: 5 4; }
.opd-svg .m-banda--pendent .m-banda__text { fill: var(--sf-gris); }
.opd-svg .m-banda--cap .m-node__caixa { stroke: var(--sf-gris-suau); stroke-width: 1; }
.opd-svg .m-banda__dup { fill: var(--sf-gris-fort); font-size: 13px; }

/* Les arestes: el tipus es llegeix pel traç. */
.m-linia { fill: none; stroke-linejoin: miter; stroke-linecap: butt; }
.m-aresta--auto .m-linia, .m-aresta--extern .m-linia { stroke: var(--sf-gris-suau); stroke-width: 1; }
.m-aresta--auto .m-punta, .m-aresta--extern .m-punta { fill: var(--sf-gris-suau); }
.m-aresta--mig .m-linia { stroke: var(--sf-gris); stroke-width: 1; stroke-dasharray: 4 3; }
.m-aresta--mig .m-punta { fill: var(--sf-gris); }
.m-aresta--ma .m-linia { stroke: var(--sf-tinta); stroke-width: 2; }
.m-aresta--ma .m-punta { fill: var(--sf-tinta); }
.m-aresta--no .m-linia { stroke: var(--sf-tinta); stroke-width: 1.5; stroke-dasharray: 1.5 3; }
.m-aresta--no .m-punta { fill: var(--sf-tinta); }
.m-toc { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; }
.m-toc-placa { fill: transparent; stroke: none; }
.m-placa rect { fill: var(--sf-paper); stroke: var(--sf-tinta); stroke-width: 1; transition: fill var(--sf-transicio); }
.m-placa text { fill: var(--sf-tinta); font-family: var(--sf-serif); font-size: 15px; font-variant-numeric: lining-nums; pointer-events: none; }
.opd-svg .m-aresta[role='button'], .opd-svg .m-placa--dades { cursor: pointer; }

/* La troballa triada: l'única cosa en terra de la pantalla. */
.opd-svg .m-sel .m-linia { stroke: var(--sf-terra); }
.opd-svg .m-sel .m-punta { fill: var(--sf-terra); }
.opd-svg .m-sel .m-placa rect, .opd-svg .m-placa--dades.m-sel rect { fill: var(--sf-terra); stroke: var(--sf-terra); }
.opd-svg .m-sel .m-placa text, .opd-svg .m-placa--dades.m-sel text { fill: var(--sf-paper); }
.opd-svg .m-node.m-sel .m-node__caixa { stroke: var(--sf-terra); stroke-width: 1.5; }

/* Focus del teclat i el que assenyala la guia: als elements de l'SVG no hi ha contorn. */
.opd-svg :focus { outline: none; }
.opd-svg .sf-assenyalat { outline: none !important; }
.opd-svg .m-aresta:focus-visible .m-placa rect, .opd-svg .m-aresta.sf-assenyalat .m-placa rect { stroke: var(--sf-terra); stroke-width: 2.5; }
.opd-svg .m-node:focus-visible .m-node__caixa { stroke: var(--sf-terra); stroke-width: 2; }
.opd-svg .m-client:focus-visible .m-toc-node { stroke: var(--sf-terra); stroke-width: 2; }
@media (hover: hover) {
  .opd-svg .m-node:not(.m-sel):hover .m-node__caixa { stroke: var(--sf-tinta); }
  .opd-svg .m-aresta[role='button']:hover .m-placa rect, .opd-svg .m-placa--dades:hover rect { fill: var(--sf-paper-3); }
  .opd-svg .m-aresta.m-sel[role='button']:hover .m-placa rect, .opd-svg .m-placa--dades.m-sel:hover rect { fill: var(--sf-terra); }
  .opd-nivell:hover .opd-nivell__nom { color: var(--sf-tinta); text-decoration: underline; text-underline-offset: 3px; }
}

/* A l'ordinador, quan el mapa no hi cap d'alt: una línia al peu del llenç, fins que s'hi arriba. */
.opd-mes {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; margin: 0;
  padding: 5px var(--sf-gutter) 6px; background: var(--sf-paper); border-top: var(--sf-linia) solid var(--sf-filet);
  font-size: var(--sf-t-nota); color: var(--sf-gris-fort); text-align: center; pointer-events: none;
}

/* El mapa encara buit (la vostra empresa, abans de respondre). */
.opd-buit {
  position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%);
  margin: 0; padding: 6px 12px; background: var(--sf-paper);
  font-size: var(--sf-t-cos); color: var(--sf-gris); text-align: center; pointer-events: none;
}

/* ── #info: el detall d'un node o d'una franja ─────────────────────── */
.opd-info {
  position: absolute; z-index: 5; top: 10px; right: 12px; width: min(330px, calc(100% - 24px));
  padding: var(--sf-e4) var(--sf-e5) var(--sf-e5);
  background: var(--sf-paper); border: var(--sf-linia) solid var(--sf-tinta);
}
.opd-info__cap { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sf-e3); }
.opd-info__titol { font-size: var(--sf-t-h3); font-weight: 600; letter-spacing: -.015em; line-height: 1.25; padding-top: 4px; }
.opd-info__tipus { font-size: var(--sf-t-nota); color: var(--sf-gris); margin-top: 2px; }
.opd-info > p { margin-top: var(--sf-e2); }
.opd-info__font { display: flex; align-items: center; gap: var(--sf-e3); flex-wrap: wrap; }
.opd-info__font .sf-boto--text { font-size: var(--sf-t-nota); }

/* ── Peu de la zona: la llegenda ───────────────────────────────────── */
.opd-zona-peu { gap: 6px var(--sf-e5); }
.opd-llegenda { gap: 6px var(--sf-e4); }
.opd-ll { display: block; flex: none; overflow: visible; }
.opd-model { display: inline-flex; align-items: center; gap: var(--sf-e2); flex-wrap: wrap; }

/* ═══ Panell: la pregunta ═══════════════════════════════════════════════ */
.opd-progres { display: grid; gap: 8px; padding: var(--sf-e4) var(--sf-gutter) 0; }
.opd-progres__text { font-size: var(--sf-t-petit); color: var(--sf-gris); font-variant-numeric: tabular-nums; }
.opd-progres__barra { width: 100%; }
/* La franja del canvi: només quan el mapa i els comptadors queden a sota (mòbil i tauleta). */
.opd-canvi { display: none; }
.opd-pregunta { padding: var(--sf-e5) var(--sf-gutter) var(--sf-e8); }
.opd-pregunta__titol { max-width: 32ch; }
.opd-pregunta__titol:focus { outline: none; }
.opd-pregunta__perque { margin-top: var(--sf-e2); max-width: 60ch; }
.opd-grup { border: 0; margin: var(--sf-e5) 0 0; padding: 0; min-width: 0; }
.opd-grup--sub { margin-top: var(--sf-e6); }
.opd-grup__titol { float: left; width: 100%; padding: 0; margin: 0 0 10px; font-size: var(--sf-t-base); font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }
.opd-grup__titol + .opd-opcions { clear: both; }
.opd-opcions { display: grid; border-top: var(--sf-linia) solid var(--sf-filet); }
.opd-opcio { position: relative; border-bottom: var(--sf-linia) solid var(--sf-filet); }
/* L'input cobreix tota l'opció: el toc i el focus són seus; el label el pinta. */
.opd-opcio input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opd-opcio label {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sf-e4);
  min-height: 48px; padding: 11px 12px; font-size: var(--sf-t-cos); line-height: 1.35; color: var(--sf-tinta);
  transition: background-color var(--sf-transicio);
}
.opd-opcio__marca { flex: none; width: 16px; height: 16px; border: var(--sf-linia) solid var(--sf-tinta); border-radius: 50%; background: var(--sf-paper); transition: background-color var(--sf-transicio); }
.opd-grup--multi .opd-opcio__marca { border-radius: 2px; }
.opd-opcio input:checked + label { background: var(--sf-paper-3); }
.opd-opcio input:checked + label .opd-opcio__marca { background: var(--sf-tinta); }
.opd-opcio input:focus-visible + label { outline: 2px solid var(--sf-terra); outline-offset: -2px; }
@media (hover: hover) {
  .opd-opcio:hover input:not(:checked) + label { background: var(--sf-paper-2); }
}
/* Les hores, a l'ordinador: cinc segments en una fila. */
@media (min-width: 761px) {
  .opd-grup--hores .opd-opcions { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; border-top: 0; }
  .opd-grup--hores .opd-opcio { border: var(--sf-linia) solid var(--sf-filet-fort); border-radius: var(--sf-radi); }
  .opd-grup--hores .opd-opcio label { justify-content: center; min-height: 52px; padding: 8px 6px; text-align: center; font-size: var(--sf-t-nota); line-height: 1.25; border-radius: var(--sf-radi); }
  .opd-grup--hores .opd-opcio__marca { display: none; }
  .opd-grup--hores .opd-opcio input:checked + label { background: var(--sf-tinta); color: var(--sf-paper); }
}
.opd-context { margin-top: var(--sf-e8); padding-top: var(--sf-e3); border-top: var(--sf-linia) solid var(--sf-filet); }
.opd-context .sf-text { margin-top: 6px; }
.opd-peu--preguntes { flex-wrap: nowrap; }
.opd-peu__dreta { margin-left: auto; gap: var(--sf-e5); flex-wrap: nowrap; }
.opd-passa { font-size: var(--sf-t-cos); }

/* ═══ Panell: el resultat ═══════════════════════════════════════════════ */
.opd-pestanyes { gap: 14px; padding: 0 20px; }
.opd-pestanyes .sf-pestanya { font-size: var(--sf-t-nota); }
.opd-vistes { position: relative; }
.opd-vista { padding: var(--sf-e5) var(--sf-gutter) var(--sf-e8); }
.opd-entrada { display: block; font-size: var(--sf-t-cos); }
.opd-entrada .sf-etiq { margin-left: 2px; }

/* La llista: cada punt porta la placa del mapa. */
.opd-punts { list-style: none; margin: var(--sf-e4) 0 0; padding: 0; }
.opd-punt {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0 var(--sf-e3);
  margin: 0 calc(-1 * var(--sf-gutter)); padding: 14px var(--sf-gutter) 16px;
  border-top: var(--sf-linia) solid var(--sf-filet); cursor: pointer; position: relative;
  transition: background-color var(--sf-transicio);
}
.opd-punt[aria-current='true'] { background: var(--sf-paper-3); box-shadow: inset 2px 0 0 var(--sf-tinta); }
/* El botó que tria el punt és el títol: es veu com un títol. */
.opd-punt__tria { display: inline; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
.opd-punt__tria:focus-visible { outline-offset: 2px; }
@media (pointer: coarse) { .opd-punt__tria { display: inline-flex; align-items: center; min-height: 44px; } }
.opd-punt__n {
  display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px;
  border: var(--sf-linia) solid var(--sf-tinta); background: var(--sf-paper);
  font-family: var(--sf-serif); font-size: 16px; line-height: 1; font-variant-numeric: lining-nums;
}
.opd-punt[aria-current='true'] .opd-punt__n { background: var(--sf-tinta); color: var(--sf-paper); }
.opd-punt__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--sf-e3); }
.opd-punt__titol { min-width: 0; }
.opd-marques { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.opd-marca { display: inline-flex; align-items: center; min-height: 22px; padding: 1px 7px; border: var(--sf-linia) solid var(--sf-filet-fort); border-radius: 2px; font-size: var(--sf-t-petit); color: var(--sf-gris-fort); white-space: nowrap; background: var(--sf-paper); }
.opd-punt__cos > p { margin-top: 6px; }
.opd-punt__cos > .opd-que { margin-top: 8px; }
.opd-que b { color: var(--sf-tinta); font-weight: 600; }
.opd-ctx b { font-weight: 600; color: var(--sf-gris-fort); }
.opd-punt__cos > .opd-ctx, .opd-punt__cos > .opd-norma, .opd-punt__cos > .opd-demos { margin-top: 8px; }
/* «Eurostat, taula …»: obre «D'on surten les dades» a la taula d'on surt la xifra. */
.opd-font { font-size: inherit; line-height: inherit; font-weight: 500; color: var(--sf-gris-fort); white-space: nowrap; }
.opd-entrada .sf-etiq + .sf-etiq { margin-left: 8px; }
/* La font triada des d'una xifra, al panell de les fonts. */
#sf-fonts > li[data-opd-triada] { box-shadow: inset 2px 0 0 var(--sf-tinta); padding-left: var(--sf-e3); }
#sf-fonts > li:focus { outline: none; }
.opd-despres { margin: var(--sf-e2) 0 0; padding-top: var(--sf-e4); border-top: var(--sf-linia) solid var(--sf-tinta); }
.opd-despres + .opd-punts { margin-top: var(--sf-e2); }
.opd-punts:last-of-type .opd-punt:last-child { border-bottom: var(--sf-linia) solid var(--sf-filet); }
.opd-nofariem { margin-top: var(--sf-e8); }
.opd-nf { margin-top: var(--sf-e3); }
.opd-nf b { color: var(--sf-tinta); font-weight: 600; display: block; }
.opd-final { margin-top: var(--sf-e8); padding-top: var(--sf-e4); border-top: var(--sf-linia) solid var(--sf-filet); }
#llista .sf-estat { padding-left: 0; padding-right: 0; min-height: 0; padding-top: 0; }

/* Les respostes */
.opd-exemple { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px var(--sf-e3); margin-bottom: var(--sf-e4); }
.opd-resposta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sf-e4); padding: 12px 0; border-top: var(--sf-linia) solid var(--sf-filet); }
.opd-resposta:last-child { border-bottom: var(--sf-linia) solid var(--sf-filet); }
.opd-resposta__p { font-size: var(--sf-t-nota); line-height: 1.35; color: var(--sf-gris); }
.opd-resposta__r { margin-top: 3px; font-size: var(--sf-t-cos); line-height: 1.4; font-weight: 500; color: var(--sf-tinta); }
.opd-resposta__r--cap { font-weight: 400; color: var(--sf-gris); }
.opd-esborra { margin-top: var(--sf-e5); }

/* Com ho pensem */
.opd-subtitol { margin-top: var(--sf-e8); }
.opd-regles { list-style: none; margin: var(--sf-e3) 0 0; padding: 0; }
.opd-regles li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0 var(--sf-e3); padding: 10px 0; border-top: var(--sf-linia) solid var(--sf-filet); }
.opd-regles li:last-child { border-bottom: var(--sf-linia) solid var(--sf-filet); }
.opd-regla__n { font-family: var(--sf-serif); font-size: 20px; line-height: 1.15; font-variant-numeric: lining-nums; }
.opd-regles + .opd-ctx { margin-top: var(--sf-e3); }
#regles .sf-h3 + .sf-text { margin-top: var(--sf-e2); }
.opd-par { margin-top: var(--sf-e3); }
.opd-nivells-text { margin: var(--sf-e2) 0 0; }
.opd-nivells-text dt { margin-top: var(--sf-e3); font-size: var(--sf-t-cos); font-weight: 600; }
.opd-nivells-text dd { margin: 2px 0 0; font-size: var(--sf-t-cos); color: var(--sf-gris-fort); max-width: 66ch; }
#regles .opd-info__font { margin-top: var(--sf-e3); }

/* El que encerta i el que no */
.opd-revisio { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--sf-e3); align-items: start; }
.opd-revisio .sf-etiq { justify-self: start; }

/* Peu del resultat: els dos botons i, a sota, la nota */
.opd-peu--resultat { display: grid; justify-content: stretch; gap: 6px; }
.opd-peu--resultat .sf-botonera { justify-content: flex-end; }
.opd-peu__nota { text-align: right; }

/* ═══ «Prova això» a l'ordinador (iniciar({ guia: { lloc } })) ════════════════════════════
   Com a les altres demos amb una barra d'eines a la zona principal: la guia de _comu va sota la barra d'eines del
   mapa, amb el seu aspecte. «Com funciona» ja és a la barra de dalt: aquí no es repeteix. */
.opd-guia-lloc .sf-guia__peu .sf-boto--text { display: none; }

/* ═══ Confirmació («Començar de nou») ═══════════════════════════════════ */
.opd-confirma { width: min(460px, 100%); }
/* Al mòbil, un full baix de la mida del text (no tota la pantalla): «auto» l'estiraria de dalt a baix. */
@media (max-width: 760px) { .opd-confirma { height: fit-content; max-height: 100dvh; margin: auto 0 0; border-top: var(--sf-linia) solid var(--sf-tinta); } }

/* ═══ Apilat (tauleta i mòbil) ══════════════════════════════════════════ */
@media (max-width: 900px) {
  .opd-panell { grid-template-rows: auto; }
  .opd-estat { grid-template-rows: auto; }
  .opd[data-estat='preguntes'] .opd-panell { order: -1; border-bottom: var(--sf-linia) solid var(--sf-filet); }
  .opd-llenc { height: auto; overflow: visible; padding-top: var(--sf-e3); }
  .opd-arrossega { display: block; padding: 0 var(--sf-gutter) 8px; }
  .opd[data-estat='preguntes'] .opd-mapa-fins { display: block; padding: 0 var(--sf-gutter) 4px; }
  .opd-mapa-caixa { position: static; overflow-x: auto; overflow-y: hidden; padding: 6px 12px 16px 0; -webkit-overflow-scrolling: touch; }
  .opd-nivells { box-shadow: none; }
  .opd-nivell { padding-left: var(--sf-gutter); }
  .opd-nivells__cap { padding-left: var(--sf-gutter); }
  .opd-buit { position: static; transform: none; padding: 0 var(--sf-gutter) var(--sf-e3); text-align: left; }
  .opd-info { position: static; width: auto; margin: 0 var(--sf-gutter) var(--sf-e4); }
  .opd-peu--preguntes { position: sticky; bottom: var(--sf-guia-alt, 0px); z-index: 6; }
  /* La subpregunta que apareix es mostra sencera per sobre del peu fix i de la guia. */
  .opd-grup { scroll-margin-bottom: calc(var(--sf-guia-alt, 0px) + 96px); }
  .opd-pregunta { padding-bottom: var(--sf-e6); }
  .opd-canvi:not([hidden]) {
    display: block; margin: 2px 0 0; padding: 8px 0 0; border-top: var(--sf-linia) solid var(--sf-filet);
    font-size: var(--sf-t-cos); font-weight: 600; line-height: 1.35; color: var(--sf-tinta); font-variant-numeric: tabular-nums;
  }
}

@media (max-width: 760px) {
  :root { --opd-nivells-w: 96px; }
  .opd-nivell__nom--llarg { display: none; }
  .opd-nivell__nom--curt { display: block; }
  .opd-nivell__n { font-size: 22px; }
  .opd-mode { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .opd-mode .sf-segment { min-height: 44px; white-space: normal; }
  .opd-eines .sf-eines__dreta { margin-left: 0; }
  .opd-reinicia { min-height: 44px; }
  .opd .opd-comptadors .sf-xifra { font-size: 34px; }
  .opd-comptadors .sf-comptador__nom { font-size: var(--sf-t-petit); }
  .opd-zona-peu { padding-top: 10px; padding-bottom: 12px; }
  .opd-pestanyes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sf-e4); padding: 0 var(--sf-gutter); overflow: visible; }
  .opd-pestanyes .sf-pestanya { white-space: normal; text-align: left; padding: 10px 0 9px; }
  .opd-peu__dreta { gap: var(--sf-e4); }
  .opd-peu--resultat .sf-botonera { display: grid; grid-template-columns: 1fr; }
  .opd-peu--resultat .sf-boto { width: 100%; }
  .opd-peu__nota { text-align: left; }
  .opd-revisio { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .opd-resposta { gap: var(--sf-e3); }
  /* Un botó dins del text: 44 px per tocar-lo amb el dit, sense separar les línies. */
  .opd-font { display: inline-block; padding: 12px 0; margin: -12px 0; }
}

/* ═══ Impressió: el mapa i la llista sencera ════════════════════════════ */
@media print {
  .opd-eines, .opd-info, .opd-arrossega, .opd-mapa-fins, .opd-buit, .opd-mes, .opd-peu, .opd-pestanyes, .opd-estat--preguntes, .opd-c-abans { display: none !important; }
  .opd-llenc { height: auto; overflow: visible; }
  .opd-mapa-caixa { position: static; overflow: visible; padding: 0; }
  /* Sense «sticky», però posicionada: els noms de les franges hi van en absolut i, si no, taparien el mapa. */
  .opd-nivells { position: relative; }
  .opd-svg .m-sel .m-linia { stroke: var(--sf-tinta); }
  .opd-svg .m-sel .m-placa rect { fill: var(--sf-paper); stroke: var(--sf-tinta); }
  .opd-svg .m-sel .m-placa text { fill: var(--sf-tinta); }
  .opd-panell { display: block; break-before: page; }
  .opd-estat--resultat[hidden], .opd-estat--resultat { display: block !important; }
  #llista[hidden], #llista { display: block !important; }
  #respostes, #regles, #encerta { display: none !important; }
  .opd-vistes { overflow: visible; }
  .opd-punt { break-inside: avoid; }
  .opd-punt[aria-current='true'] { background: none; box-shadow: none; }
}