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

   El Gantt és el llenguatge del taller: franges de torn, una fila per màquina,
   les operacions en gris amb un filet blanc entre veïnes i UNA ordre en terra,
   amb la ruta de la peça, l'entrega i el tros que arriba tard ratllat. */

:root {
  --g-op: #d3d3ce;            /* una operació: tinta suau, sense color */
  --g-op-text: #3d3d3d;       /* número dins de l'operació · 8:1 sobre --g-op */
  --g-fora: #f1f1ee;          /* fora de torn: un gris molt suau de fons */
}

/* ── Barra d'eines del pla ─────────────────────────────────────────────── */
.eines-pla { position: relative; gap: var(--sf-e2); flex-wrap: nowrap; }
.eines-pla .boto-pla { min-height: 36px; padding: 0 14px; font-size: var(--sf-t-nota); }
.eines-pla #planifica { min-width: 116px; }
.eines-pla__altres { display: flex; gap: var(--sf-e2); flex: none; }
.boto-pla .curt { display: none; }
.estat-pla {
  margin-left: auto; padding-left: var(--sf-e3); min-width: 0;
  font-size: var(--sf-t-nota); line-height: 1.3; color: var(--sf-gris-fort);
  font-variant-numeric: tabular-nums; text-align: right;
}
.estat-pla[data-estat='buscant'] { color: var(--sf-tinta); }
/* A l'ordinador petit (901-1279 px) el panell fa 520 px i la zona del Gantt és
   el que queda: de 380 a 760 px. La barra s'hi adapta mirant la zona, no la
   finestra: primer l'estat baixa a una segona línia i després els botons
   fan servir el nom curt, com al mòbil. */
.sf-zona { container: zona / inline-size; }
@media (min-width: 761px) {
  @container zona (max-width: 740px) {
    .eines-pla { flex-wrap: wrap; row-gap: 6px; }
    .estat-pla { flex: 1 1 100%; margin-left: 0; padding-left: 0; text-align: left; }
  }
  @container zona (max-width: 560px) {
    .eines-pla .boto-pla .llarg { display: none; }
    .eines-pla .boto-pla .curt { display: inline; }
  }
  @container zona (max-width: 420px) {
    .eines-pla #planifica { min-width: 0; }
    .eines-pla .boto-pla { padding: 0 10px; }
  }
}
/* El progrés de la cerca és el filet de sota de la barra d'eines, que s'omple de tinta. */
.progres-pla { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.progres-pla > span { display: block; height: 100%; width: var(--pc, 0%); background: var(--sf-tinta); }

/* ── El Gantt ──────────────────────────────────────────────────────────── */
.gantt-llenc { background: var(--sf-paper); }
.gantt { position: absolute; inset: 0; }
.gantt__noms { display: none; }
.gantt__temps { position: relative; width: 100%; height: 100%; overflow: hidden auto; }
/* max-width: none: comu.css fa «svg { max-width: 100% }» i al mòbil encongiria el Gantt, que hi fa scroll. */
.gantt__svg { display: block; max-width: none; user-select: none; -webkit-user-select: none; touch-action: pan-x pan-y; }

.gantt__svg text { font-family: var(--sf-sans); font-size: 13px; font-variant-numeric: tabular-nums; }
.g-fora { fill: var(--g-fora); }
.g-linia { stroke: var(--sf-filet); stroke-width: 1; shape-rendering: crispEdges; }
.g-linia--torn { stroke: var(--sf-filet-fort); }
.g-fila { stroke: var(--sf-filet); stroke-width: 1; shape-rendering: crispEdges; }
.g-fila--cap { stroke: var(--sf-tinta); }
.g-hora { fill: var(--sf-gris); }
.g-torn { fill: var(--sf-gris-fort); font-weight: 500; }
.g-nom { fill: var(--sf-tinta); font-size: 14px !important; }
.g-ocup { fill: var(--sf-gris-fort); }
.g-ocup-cap { fill: var(--sf-gris); }

/* Operacions */
.op { transition: transform var(--sf-transicio); cursor: grab; outline: none; }
.op__barra { fill: var(--g-op); shape-rendering: crispEdges; }
.op__num { fill: var(--g-op-text); font-weight: 500; pointer-events: none; }
.op--sel .op__barra { fill: var(--sf-terra); }
.op--sel .op__num { fill: var(--sf-paper); }
/* El tros que acaba després de l'entrega: ratllat gris; en terra, si és l'ordre triada. */
.op__tard { fill: url(#ratllat-fosc); pointer-events: none; }
.op--sel .op__tard { fill: url(#ratllat); }
.ratlla { stroke: var(--sf-paper); stroke-width: 1.6; }
.ratlla--fosc { stroke: #8a8a85; stroke-width: 1.3; }
/* L'operació tocada (la que mouen «Abans» i «Després»): un filet de tinta. */
.op--tocada .op__barra { stroke: var(--sf-tinta); stroke-width: 2; }
.op:focus-visible .op__barra { stroke: var(--sf-terra); stroke-width: 2; }
.op--sel:focus-visible .op__barra { stroke: var(--sf-tinta); }
.gantt__svg.quiet .op { transition: none; }
.gantt__svg[data-bloquejat] .op { cursor: default; }
.gantt__svg[data-arrossegant] .op { cursor: grabbing; }
@media (hover: hover) {
  .op:hover .op__barra { fill: #c2c2bc; }
  .op--sel:hover .op__barra { fill: #8f3420; }
}

/* La ruta de la peça, l'entrega i el final del pla */
.g-ruta { fill: none; stroke: var(--sf-terra); stroke-width: 1.25; stroke-linejoin: round; pointer-events: none; }
.g-entrega { stroke: var(--sf-terra); stroke-width: 1.5; stroke-dasharray: 5 4; pointer-events: none; }
.g-fi { stroke: var(--sf-tinta); stroke-width: 2; pointer-events: none; }
.g-etiq__fons { fill: var(--sf-paper); }
.g-etiq--fi text { fill: var(--sf-tinta); font-weight: 600; }
.g-etiq--entrega text { fill: var(--sf-terra); font-weight: 600; }

/* Arrossegar: l'ombra de l'operació i la marca d'on quedaria. */
.g-ombra { fill: none; stroke: var(--sf-tinta); stroke-width: 1; stroke-dasharray: 3 2; pointer-events: none; }
.g-marca { stroke: var(--sf-tinta); stroke-width: 2; pointer-events: none; }
.g-marca--no { stroke: var(--sf-gris-suau); stroke-dasharray: 3 3; }

/* La nota de l'operació que hi ha sota el ratolí. */
.gantt-info {
  position: absolute; z-index: 3; pointer-events: none;
  background: var(--sf-tinta); color: var(--sf-paper);
  font-size: var(--sf-t-nota); line-height: 1.4; padding: 8px 11px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.gantt-info b { font-weight: 600; }
.gantt-info__pista { display: block; margin-top: 4px; color: #c9c9c5; }

/* Llegenda */
.peu-gantt__dades { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.llegenda-gantt i { border: 0; width: 14px; height: 10px; }
.llegenda-gantt .ll-op { background: var(--g-op); }
.llegenda-gantt .ll-sel { background: var(--sf-terra); }
.llegenda-gantt .ll-entrega { width: 0; height: 14px; border-left: 1.5px dashed var(--sf-terra); margin: 0 4px; }
.llegenda-gantt .ll-fi { width: 0; height: 14px; border-left: 2px solid var(--sf-tinta); margin: 0 4px; }
.llegenda-gantt .ll-tard { background: repeating-linear-gradient(-45deg, var(--g-op) 0 2.2px, #8a8a85 2.2px 3.5px); }
.llegenda-gantt .ll-fora { background: var(--g-fora); outline: 1px solid var(--sf-filet-fort); outline-offset: -1px; }

/* ── Panell ────────────────────────────────────────────────────────────── */
/* Sense això, al mòbil els comptadors (columnes 1fr) eixamplen el panell per
   sobre de la pantalla: un fill de graella fa servir el seu min-content. */
.sf-panell > * { min-width: 0; }

/* ── Comptadors ────────────────────────────────────────────────────────── */
.comptadors-pla .sf-comptador__nom { flex-direction: column; align-items: flex-start; gap: 2px; }
/* Just després d'una cerca, el valor d'abans, perquè es vegi què ha canviat. */
.comptadors-pla .abans { color: var(--sf-gris-fort); font-variant-numeric: tabular-nums; }
.comptadors-pla .sf-xifra small { margin-left: 4px; }
.comptadors-pla .sf-xifra .dia { font-family: var(--sf-sans); font-size: var(--sf-t-cos); color: var(--sf-gris); margin: 0 4px 0 0; letter-spacing: 0; }

/* ── Ordres ────────────────────────────────────────────────────────────── */
.nota-taula { margin-bottom: var(--sf-e2); }
.nota-taula__fonts { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.nota-taula__tria { display: block; margin-top: 4px; color: var(--sf-gris-fort); }
.taula-ordres { font-size: var(--sf-t-nota); }
.taula-ordres td { padding-top: 8px; padding-bottom: 8px; }
.taula-ordres .codi-of { font-weight: 600; white-space: nowrap; }
.taula-ordres .col-peca { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sf-gris-fort); }
.taula-ordres .peca-mobil, .taula-ordres .prio-mobil { display: none; }
.taula-ordres td.tard { font-weight: 600; }
.taula-ordres td.prio-alta, .taula-ordres td.prio-urgent { font-weight: 600; }
.taula-ordres .hora { white-space: nowrap; }

/* El detall de l'ordre triada: una fila de la taula, just a sota de la seva,
   amb el mateix filet terra a l'esquerra. */
.taula-ordres .fila-detall > td { padding: 0; border-top: 0; background: var(--sf-paper-2); box-shadow: inset 2px 0 0 var(--sf-terra); }
.detall { padding: var(--sf-e3) var(--sf-e4) var(--sf-e4) calc(var(--sf-e4) + 2px); }
.detall__controls { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sf-e3) var(--sf-e4); align-items: center; }
.detall__nom { font-size: var(--sf-t-nota); color: var(--sf-gris-fort); }
.detall__entrega { display: flex; align-items: center; gap: var(--sf-e2); }
.detall__valor { min-width: 84px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.detall__pes { grid-column: 2; margin-top: -4px; }
.detall__ruta { margin-top: var(--sf-e5); }
.detall__ruta-cap { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; font-size: var(--sf-t-nota); color: var(--sf-gris); margin-bottom: var(--sf-e2); }
.detall__ruta-cap h4 { font-size: var(--sf-t-cos); font-weight: 600; color: var(--sf-tinta); margin-right: 4px; }
.ruta { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sf-e4); }
.ruta li { border-top: var(--sf-linia) solid var(--sf-filet); }
.ruta__op {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 0 6px; align-items: baseline;
  width: 100%; min-height: 36px; padding: 6px 4px; border: 0; background: none; text-align: left; cursor: pointer;
  font-size: var(--sf-t-nota); line-height: 1.3; color: var(--sf-gris-fort);
}
.ruta__n { font-size: var(--sf-t-nota); font-weight: 600; line-height: 1.3; color: var(--sf-gris); font-variant-numeric: tabular-nums; }
.ruta__maq { color: var(--sf-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ruta__min { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ruta__hores { grid-column: 2 / 4; font-variant-numeric: tabular-nums; color: var(--sf-gris); font-size: var(--sf-t-petit); }
.ruta__op[aria-pressed='true'] { background: var(--sf-paper-3); box-shadow: inset 2px 0 0 var(--sf-tinta); }
.ruta__op:disabled { cursor: default; }
.detall__moure { margin-top: var(--sf-e4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-e2) var(--sf-e3); }
.detall__moure .sf-nota { flex: 1 1 100%; }
@media (hover: hover) { .ruta__op:not(:disabled):not([aria-pressed='true']):hover { background: var(--sf-paper-2); } }

/* ── Comparació ────────────────────────────────────────────────────────── */
.comparacio { list-style: none; padding: 0; margin: 0; }
.comparacio > li { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 0 var(--sf-e4); padding: var(--sf-e4) 0; border-top: var(--sf-linia) solid var(--sf-filet); }
.comparacio > li:first-child { border-top-color: var(--sf-tinta); }
.comparacio__xifra { font-family: var(--sf-serif); font-size: 34px; line-height: 1; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: lining-nums; }
.comparacio__xifra small { font-family: var(--sf-sans); font-size: var(--sf-t-nota); color: var(--sf-gris); margin-left: 4px; letter-spacing: 0; }
/* Sense xifra: el guió en sans, perquè el de la Bodoni és un filet que gairebé no es veu. */
.comparacio__xifra--buida { font-family: var(--sf-sans); font-weight: 300; color: var(--sf-gris); }
.comparacio__cap { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; margin-bottom: 6px; }
.comparacio__cap h3 { font-size: var(--sf-t-cos); font-weight: 600; }
.comparacio__cap .abans { font-size: var(--sf-t-petit); color: var(--sf-gris); }
.comparacio p + p { margin-top: 8px; }
.comparacio .diferencia { color: var(--sf-tinta); font-weight: 600; }
.comparacio .sf-boto { margin-top: var(--sf-e3); }

/* ── Com es calcula i el que encerta ───────────────────────────────────── */
.calcul-llista > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 var(--sf-e2); }
.calcul-llista .num-pas { font-size: var(--sf-t-cos); font-weight: 600; line-height: 1.4; color: var(--sf-gris); font-variant-numeric: tabular-nums; }
.calcul-llista h3 { font-size: var(--sf-t-cos); font-weight: 600; margin-bottom: 4px; }
.formula { font-family: var(--sf-mono); font-size: var(--sf-t-nota); margin-top: 8px; padding: 10px 12px; background: var(--sf-paper-2); color: var(--sf-gris-fort); overflow-x: auto; white-space: nowrap; }
.formula b { color: var(--sf-tinta); font-weight: 600; }
.revisio-xifres { padding: 0; }
.revisio-nota { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: var(--sf-e3) 0 var(--sf-e5); }
.revisio { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--sf-e3); align-items: start; }
.revisio .sf-etiq { justify-self: start; }
.revisio .sf-text strong { font-weight: 600; }
.revisio .sf-nota { margin-top: 6px; }

/* ── «Prova això» (de _comu) ───────────────────────────────────────────────
   A l'ordinador, comu.js la posa dins de #guia-lloc, entre la vista i les
   baixades (iniciar({ guia: { lloc } })): ocupa el seu lloc i no tapa res. */
@media (min-width: 761px) {
  .sf-panell { grid-template-rows: auto auto minmax(0, 1fr) auto auto; }
  .guia-lloc:not(:empty) { border-top: var(--sf-linia) solid var(--sf-filet); }
  /* El panell és estret: a dalt, «Prova això», el comptador i «Entesos»; a
     sota, el pas d'ara amb «Mostra-m'ho». «Com funciona» ja és a la barra.
     Quan s'han fet els tres passos, el text final i «Entesos» en una línia. */
  .guia-lloc > .sf-guia {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sf-e2) var(--sf-e4);
    border-bottom: 0;
  }
  .guia-lloc > .sf-guia[hidden] { display: none; }
  .guia-lloc .sf-guia__cap { grid-column: 1; grid-row: 1; }
  .guia-lloc .sf-guia__peu { grid-column: 2; grid-row: 1; margin-left: 0; }
  .guia-lloc .sf-guia__peu .sf-boto--text { display: none; }
  .guia-lloc .sf-guia ol { grid-column: 1 / -1; }
  .guia-lloc .sf-guia[data-sf-acabada] .sf-guia__cap { display: none; }
  .guia-lloc .sf-guia__final { grid-column: 1; grid-row: 1; }
}

/* Amb el dit, tocar el Gantt hi posa el focus (el contenidor fa scroll): sense
   el contorn blau del navegador; amb el teclat, el de la marca. */
.gantt__svg:focus { outline: none; }
.gantt__temps:focus:not(:focus-visible) { outline: none; }
.gantt__temps:focus-visible { outline: 2px solid var(--sf-terra); outline-offset: -2px; }

/* A la barra, el subtítol tallat amb «…» fa descuidat: per sota de 1366 px
   no hi és (_comu l'amaga a partir de 1180). */
@media (max-width: 1365px) { .sf-barra__subtitol { display: none; } }

/* La línia del resultat sota la barra d'eines: només al mòbil. */
.resum-pla { display: none; }
.nota-eix { flex-basis: 100%; color: var(--sf-gris-fort); }

/* ── Mòbil ─────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .eines-pla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-e2); padding-top: var(--sf-e3); padding-bottom: var(--sf-e3); }
  .eines-pla .boto-pla { min-height: 44px; padding: 0 8px; font-size: var(--sf-t-cos); }
  .eines-pla #planifica { width: 100%; }
  .eines-pla__altres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .boto-pla .llarg { display: none; }
  .boto-pla .curt { display: inline; }
  .estat-pla { margin: 0; padding: 0; text-align: left; }
  .resum-pla { display: block; margin: -4px 0 0; font-size: var(--sf-t-cos); font-weight: 600; line-height: 1.3; color: var(--sf-tinta); font-variant-numeric: tabular-nums; }

  /* Les quatre pestanyes, en dues files de dues: en una sola fila la
     d'honestedat («El que encerta i el que no») quedava tallada a la vora. */
  .sf-pestanyes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sf-e4); overflow: visible; }
  .sf-pestanya { text-align: left; white-space: normal; }

  .gantt-llenc { height: auto; }
  .gantt { position: relative; inset: auto; display: grid; grid-template-columns: var(--g-noms, 112px) minmax(0, 1fr); }
  .gantt__noms { display: block; position: relative; border-right: var(--sf-linia) solid var(--sf-filet-fort); }
  .gantt__nom { position: absolute; left: var(--sf-gutter); right: 6px; display: flex; flex-direction: column; justify-content: center; line-height: 1.2; }
  .gantt__nom b { font-size: var(--sf-t-petit); font-weight: 500; color: var(--sf-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gantt__nom span { font-size: var(--sf-t-petit); color: var(--sf-gris); font-variant-numeric: tabular-nums; }
  .gantt__nom--cap { justify-content: flex-end; padding-bottom: 6px; }
  .gantt__temps { height: auto; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }

  .peu-gantt { padding-top: var(--sf-e2); padding-bottom: var(--sf-e2); }
  .comptadors-pla .sf-xifra .dia { font-size: var(--sf-t-petit); margin-right: 3px; }
  .comptadors-pla .sf-xifra small { font-size: var(--sf-t-petit); margin-left: 3px; }

  .comparacio > li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .detall__controls { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .detall__pes { grid-column: 1; margin-top: 0; }
  .ruta { grid-template-columns: minmax(0, 1fr); }
  .ruta__op { min-height: 44px; }
  .detall__ruta-cap h4 { flex-basis: 100%; }
}
/* Al mòbil la taula perd «Peça · client» i «Prioritat»: la peça va sota el
   codi i la prioritat, si no és normal, al costat. */
@media (max-width: 600px) {
  .taula-ordres .col-peca, .taula-ordres .col-prio { display: none; }
  .taula-ordres .peca-mobil { display: block; font-weight: 400; font-size: var(--sf-t-petit); color: var(--sf-gris); max-width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .taula-ordres .prio-mobil:not(:empty) { display: inline; margin-left: 6px; font-weight: 600; }
  .taula-ordres .fila-detall > td { box-shadow: inset 2px 0 0 var(--sf-terra); }
  .detall { padding-left: calc(var(--sf-e3) + 2px); padding-right: var(--sf-e3); }
}
@media (max-width: 420px) { .revisio { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* ── Impressió: el Gantt i la taula, amb el peu de SANFELIU ─────────────── */
@media print {
  .eines-pla .boto-pla, .eines-pla__altres, .progres-pla, .gantt-info, .sf-pestanyes, .sf-peu-panell, .fila-detall, .g-arrossega, .nota-taula__tria { display: none !important; }
  .eines-pla { min-height: 0; padding: 0 0 2mm; border: 0; }
  .estat-pla { margin: 0; padding: 0; text-align: left; }
  .gantt-llenc { height: auto !important; overflow: visible; background: none; }
  .gantt { position: static; }
  .gantt__temps { height: auto; overflow: visible; }
  .gantt__svg { width: 100% !important; height: auto !important; }
  .sf-vista[hidden] { display: none !important; }
  .sf-panell { margin-top: 4mm; }
  .comptadors-pla { padding-left: 0; padding-right: 0; }
  .sf-vista { padding-left: 0; padding-right: 0; }
}