/* Previsió de demanda · 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 llenguatge és el de l'ofici de l'estoc: la previsió amb la seva banda,
   les «dents de serra» de l'estoc amb el punt de comanda, les comandes com a
   barres de termini (de quan es demana a quan arriba) i la matriu ABC/XYZ.
   Tinta sobre blanc; l'únic color del gràfic és la venda perduda. */

/* ═══ Zona: l'article ═════════════════════════════════════════════════════ */
.zona { grid-template-rows: auto auto minmax(0, 1fr) auto auto; }

.eines-article { flex-wrap: nowrap; justify-content: space-between; min-height: 60px; }
.article { min-width: 0; display: grid; gap: 1px; }
.article__nom { font-size: 18px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.article__trad { font-size: var(--sf-t-petit); font-weight: 400; letter-spacing: 0; color: var(--sf-gris); margin-left: 4px; white-space: nowrap; }
.article__codi { font-family: var(--sf-mono); font-size: var(--sf-t-petit); color: var(--sf-gris-fort); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Les dades que porten al lloc d'on surten: el preu habitual, les xifres i les cel·les de la comparació. */
.enllac-calcul, .enllac-xifra {
  display: inline-block; padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit; text-align: inherit;
  text-decoration: underline; text-decoration-color: var(--sf-filet-fort); text-underline-offset: 3px;
}
#pol-previsio[aria-disabled='true'] { border-color: var(--sf-filet); color: var(--sf-gris); background: var(--sf-paper); cursor: not-allowed; }
.vistes { flex: none; flex-wrap: nowrap; }

.eines-vista { min-height: 52px; }
.eines-vista__grup { display: flex; align-items: center; gap: var(--sf-e3) var(--sf-e5); flex-wrap: wrap; min-width: 0; width: 100%; }
.origen { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; margin-left: auto; font-size: var(--sf-t-petit); color: var(--sf-gris); }
.origen__parell { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#mostra-real[aria-pressed='true'] { background: var(--sf-paper-3); }

/* ── El llenç i els dos gràfics ─────────────────────────────────────── */
.llenc { background: var(--sf-paper); }
.grafic { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.grafic:focus { outline: none; }
.grafic:focus-visible { outline: 2px solid var(--sf-terra); outline-offset: -3px; }
.grafic text { font-family: var(--sf-sans); font-size: 13px; font-variant-numeric: tabular-nums; }
.grafic .g-guia { stroke: var(--sf-filet); stroke-width: 1; }
.grafic .g-zero { stroke: var(--sf-tinta); stroke-width: 1; }
.grafic .g-marca { stroke: var(--sf-filet-fort); stroke-width: 1; }
.grafic .g-text { fill: var(--sf-gris); }
.grafic .g-text--fort { fill: var(--sf-gris-fort); }

/* Previsió */
.grafic .g-hist { fill: none; stroke: var(--sf-tinta); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.grafic .g-futur { fill: var(--sf-paper-2); }
.grafic .g-banda { fill: #dededa; }
.grafic .g-prev { fill: none; stroke: var(--sf-tinta); stroke-width: 2; stroke-dasharray: 6 4; stroke-linejoin: round; }
.grafic .g-real { fill: none; stroke: var(--sf-tinta); stroke-width: 1; stroke-linejoin: round; }
.grafic .g-real-punt { fill: var(--sf-tinta); }
.grafic .g-avui { stroke: var(--sf-gris-fort); stroke-width: 1; }
.grafic .g-avui-text { fill: var(--sf-tinta); font-weight: 600; }

/* Simulació: les dents de serra */
.grafic .g-estoc-area { fill: var(--sf-paper-3); }
.grafic .g-estoc { fill: none; stroke: var(--sf-tinta); stroke-width: 1.5; stroke-linejoin: miter; }
.grafic .g-rop { fill: none; stroke: var(--sf-tinta); stroke-width: 1; stroke-dasharray: 4 3; }
.grafic .g-ss { fill: url(#ratllat); }
.grafic .g-ss-vora { stroke: var(--sf-gris-suau); stroke-width: 1; }
.grafic .g-ratlla { stroke: #b9b9b4; stroke-width: 1; }
.grafic .g-comanda { stroke: var(--sf-tinta); stroke-width: 1.5; }
.grafic .g-comanda-ini { fill: var(--sf-tinta); }
.grafic .g-comanda-fi { stroke: var(--sf-tinta); stroke-width: 1.5; }
.grafic .g-comanda-text { fill: var(--sf-tinta); }
.grafic .g-carril-text { fill: var(--sf-gris); }
.grafic .g-perdut { fill: var(--sf-error); }
.grafic .g-perdut-text { fill: var(--sf-error); font-weight: 600; }

/* La setmana que s'assenyala (ratolí, dit o fletxes) */
.grafic .g-setmana { fill: var(--sf-paper-2); }
.grafic .g-cursor { stroke: var(--sf-tinta); stroke-width: 1; stroke-dasharray: 2 3; }
.grafic .g-cursor-punt { fill: var(--sf-paper); stroke: var(--sf-tinta); stroke-width: 1.5; }

/* L'avís d'un article sense prou història, dins del gràfic */
/* A dalt a l'esquerra: en un article nou, abans de la primera venda el gràfic és buit. */
.llenc__avis { position: absolute; z-index: 2; top: 44px; left: 70px; max-width: 360px; }
.llenc__avis .sf-etiq { justify-self: start; }
.llenc__estat { position: absolute; inset: 0; z-index: 3; background: var(--sf-paper); }
.llenc__estat:empty { display: none; }

/* ── Sota el gràfic: la lectura i la llegenda ───────────────────────── */
.peu-grafic { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding-top: 10px; padding-bottom: 10px; }
.peu-grafic > :last-child:not(:first-child) { margin-left: 0; }
.lectura { font-size: var(--sf-t-nota); color: var(--sf-tinta); font-variant-numeric: tabular-nums; min-height: 1.4em; }
.lectura b { font-weight: 600; }
.lectura--buida { color: var(--sf-gris); }
.lectura .sep { color: var(--sf-gris-suau); padding: 0 4px; }
.lectura .perdut { color: var(--sf-error); font-weight: 600; }

/* Les mostres de la llegenda, dibuixades com al gràfic */
.sf-llegenda i.ll-venda { border-top: 1.5px solid var(--sf-tinta); }
.sf-llegenda i.ll-previsio { border-top: 2px dashed var(--sf-tinta); }
.sf-llegenda i.ll-banda { width: 16px; height: 10px; border: 0; background: #dededa; }
.sf-llegenda i.ll-real { position: relative; border-top: 1px solid var(--sf-tinta); }
.sf-llegenda i.ll-real::after { content: ''; position: absolute; left: 6px; top: -3.5px; width: 6px; height: 6px; border-radius: 50%; background: var(--sf-tinta); }
.sf-llegenda i.ll-estoc { width: 16px; height: 10px; border: 0; border-top: 1.5px solid var(--sf-tinta); background: var(--sf-paper-3); }
.sf-llegenda i.ll-rop { border-top: 1px dashed var(--sf-tinta); }
.sf-llegenda i.ll-ss { width: 16px; height: 10px; border: 1px solid var(--sf-gris-suau); background: repeating-linear-gradient(135deg, #b9b9b4 0 1px, transparent 1px 4px); }
.sf-llegenda i.ll-comanda { position: relative; border-top: 1.5px solid var(--sf-tinta); }
.sf-llegenda i.ll-comanda::before { content: ''; position: absolute; left: -2px; top: -4px; width: 6px; height: 6px; border-radius: 50%; background: var(--sf-tinta); }
.sf-llegenda i.ll-comanda::after { content: ''; position: absolute; right: 0; top: -5px; width: 1.5px; height: 8px; background: var(--sf-tinta); }
.sf-llegenda i.ll-perdut { width: 10px; height: 10px; border: 0; background: var(--sf-error); }

/* ── El resultat: la previsió sumada o la comparació de les dues regles ── */
.resultat { border-top: var(--sf-linia) solid var(--sf-filet); padding: var(--sf-e3) var(--sf-gutter) var(--sf-e4); }
.resum { font-size: var(--sf-t-cos); color: var(--sf-gris-fort); font-variant-numeric: tabular-nums; }
.resum b { color: var(--sf-tinta); font-weight: 600; }
.cmp { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cmp th, .cmp td { padding: 7px 10px; text-align: left; font-size: var(--sf-t-cos); line-height: 1.3; border-top: var(--sf-linia) solid var(--sf-filet); }
.cmp thead th { border-top: 0; border-bottom: var(--sf-linia) solid var(--sf-tinta); font-size: var(--sf-t-nota); font-weight: 400; color: var(--sf-gris); vertical-align: bottom; padding-top: 0; }
.cmp th:first-child { padding-left: 0; }
.cmp td:last-child, .cmp th:last-child { padding-right: 0; }
.cmp .n { text-align: right; }
.cmp tbody th { font-weight: 500; color: var(--sf-gris-fort); white-space: nowrap; }
.cmp tbody td { color: var(--sf-gris-fort); }
/* La regla dibuixada: tinta i un filet a l'esquerra, com el segment premut. */
.cmp tr[data-triada] th, .cmp tr[data-triada] td { color: var(--sf-tinta); font-weight: 600; background: var(--sf-paper-2); }
.cmp tr[data-triada] th { box-shadow: inset 2px 0 0 var(--sf-tinta); padding-left: 10px; }
.cmp td.perdut-si { color: var(--sf-error); }
.cmp__nota { margin-top: var(--sf-e2); }

/* ═══ Panell ═════════════════════════════════════════════════════════════ */
.panell { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
.xifres { padding-bottom: var(--sf-e3); }
.xifres .sf-comptador__nom { display: block; }
.xifra-boto {
  display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; color: var(--sf-tinta); text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 6px;
}
/* Sense dada: un guió llarg en Archivo (el de Bodoni és un filet que no es veu). */
.xifra-boto--buida { font-family: var(--sf-sans); font-weight: 300; color: var(--sf-gris-fort); }
.xifres__peu { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin-top: calc(var(--sf-e2) * -1); font-size: var(--sf-t-nota); color: var(--sf-gris); }

.controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-e3) var(--sf-e6); padding: var(--sf-e2) var(--sf-gutter) var(--sf-e4); }
.controls .sf-camp { align-content: start; }
.controls .sf-nota { line-height: 1.4; }
.controls .sf-camp__nom output { white-space: nowrap; }

.pestanyes .curt { display: none; }

/* El peu del panell: la nota a l'esquerra i el botó a la dreta. */
.sf-peu-panell .sf-nota { flex: 1 1 240px; }
.sf-peu-panell .sf-boto { flex: none; }

/* ── La matriu ABC/XYZ ─────────────────────────────────────────────── */
.matriu-cap { display: flex; align-items: baseline; gap: var(--sf-e2) var(--sf-e3); flex-wrap: wrap; margin-bottom: var(--sf-e3); }
.matriu-cap .sf-h3 { font-size: var(--sf-t-cos); }
.matriu-cap .sf-boto--text { margin-left: auto; font-size: var(--sf-t-nota); }
.matriu-cap .sf-boto--text[aria-pressed='true'] { text-decoration-color: currentColor; font-weight: 600; }
.matriu {
  display: grid; grid-template-columns: minmax(92px, .8fr) repeat(3, minmax(0, 1fr));
  border-bottom: var(--sf-linia) solid var(--sf-filet);
}
.matriu__col { padding: 0 10px 6px; font-size: var(--sf-t-nota); line-height: 1.25; border-bottom: var(--sf-linia) solid var(--sf-tinta); }
.matriu__esq { border-bottom: var(--sf-linia) solid var(--sf-tinta); padding: 0 8px 6px 0; align-self: end; font-size: var(--sf-t-petit); line-height: 1.25; color: var(--sf-gris); }
.matriu__col b, .matriu__fila b { font-weight: 600; color: var(--sf-tinta); }
.matriu__col span, .matriu__fila span { display: block; color: var(--sf-gris); font-size: var(--sf-t-petit); }
.matriu__fila { padding: 7px 10px 7px 0; font-size: var(--sf-t-nota); line-height: 1.2; border-top: var(--sf-linia) solid var(--sf-filet); }
.matriu__fila:nth-child(5) { border-top: 0; }
.cella {
  display: flex; align-items: baseline; gap: 8px; min-height: 48px; padding: 9px 10px 8px;
  border: 0; border-left: var(--sf-linia) solid var(--sf-filet); border-top: var(--sf-linia) solid var(--sf-filet);
  background: var(--sf-paper); color: var(--sf-tinta); text-align: left; cursor: pointer;
  transition: background-color var(--sf-transicio);
}
.cella:nth-child(-n+8) { border-top: 0; }
.cella__n { font-family: var(--sf-serif); font-size: 28px; line-height: 1; font-variant-numeric: lining-nums; letter-spacing: -.01em; }
.cella__q { font-size: var(--sf-t-petit); color: var(--sf-gris); white-space: nowrap; }
.cella[aria-pressed='true'] { box-shadow: inset 0 0 0 2px var(--sf-tinta); }
.cella:focus-visible { outline-offset: -2px; }

/* ── La cerca i la llista ──────────────────────────────────────────── */
.cerca { margin-top: var(--sf-e5); }
.llista-compte { margin-top: var(--sf-e3); min-height: 1.45em; }
.llista-compte .sf-boto--text { font-size: inherit; }
.llista-caixa { margin-top: 2px; }
.llista { table-layout: fixed; }
.llista .c-codi { width: 76px; }
.llista .c-classe { width: 62px; }
.llista .c-venut { width: 92px; white-space: normal; }
.llista .c-model { width: 118px; }
.llista th .sf-etiq { display: block; margin-top: 2px; font-size: var(--sf-t-petit); }
.llista td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.llista td.codi { font-size: var(--sf-t-petit); }
.llista td.classe { font-variant-numeric: tabular-nums; }
.llista td.model { color: var(--sf-gris-fort); font-size: var(--sf-t-nota); }
.llista td.nom { font-size: var(--sf-t-nota); }
.llista .sf-estat { min-height: 160px; padding-left: 0; padding-right: 0; }
.mes-files { margin-top: var(--sf-e4); }
.llista-buit .sf-estat { min-height: 160px; padding-left: 0; padding-right: 0; }

/* ── Com es calcula ────────────────────────────────────────────────── */
.calcul { counter-reset: pas; }
.calcul__pas { border-top: var(--sf-linia) solid var(--sf-filet); padding: var(--sf-e3) 0 var(--sf-e4); display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0 var(--sf-e2); }
.calcul__pas:first-child { border-top: 0; padding-top: 0; }
.calcul__n { font-family: var(--sf-serif); font-size: 20px; line-height: 1.1; color: var(--sf-gris); }
.calcul__titol { font-size: var(--sf-t-cos); font-weight: 600; letter-spacing: -.01em; margin-bottom: 4px; }
.calcul .sf-text { max-width: none; }
.calcul .sf-text b { color: var(--sf-tinta); font-weight: 600; }
.formula { font-family: var(--sf-mono); font-size: var(--sf-t-petit); margin-top: var(--sf-e2); padding: 9px 12px; background: var(--sf-paper-2); color: var(--sf-gris-fort); overflow-x: auto; white-space: nowrap; line-height: 1.6; }
.formula b { color: var(--sf-tinta); font-weight: 600; }
.calcul__avis { margin-top: var(--sf-e2); }
.calcul__pas:focus { outline: none; }
/* El pas d'on surt la xifra que s'ha tocat: la fórmula amb un filet terra, l'única selecció de la vista. */
.calcul__pas[data-marcat] .calcul__n, .calcul__pas[data-marcat] .calcul__titol { color: var(--sf-tinta); }
.calcul__pas[data-marcat] .formula, .calcul__pas[data-marcat] .calcul__avis { box-shadow: inset 2px 0 0 var(--sf-terra); }
.calcul__pas[data-marcat]:not(:has(.formula, .calcul__avis)) .sf-text { box-shadow: inset 2px 0 0 var(--sf-terra); padding-left: 12px; }

/* ── El que encerta i el que no ────────────────────────────────────── */
.conjunt { min-height: 120px; }
.conjunt .sf-estat { min-height: 160px; padding-left: 0; padding-right: 0; }
.conjunt__cap { display: flex; align-items: baseline; gap: var(--sf-e3); flex-wrap: wrap; margin-bottom: var(--sf-e3); }
.conjunt__cap .sf-h3 { font-size: var(--sf-t-cos); }
.conjunt .sf-comptadors { padding: 0; margin-bottom: var(--sf-e4); }
.conjunt .sf-xifra { font-size: 34px; }
.conjunt .sf-xifra small { font-family: var(--sf-sans); }
.conjunt .sf-text + .sf-text { margin-top: var(--sf-e2); }
.conjunt__accio { margin-top: var(--sf-e2); }
.pastilles { margin-top: var(--sf-e6); }
.pastilles__nota { margin-bottom: var(--sf-e2); }
.revisio { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--sf-e3); align-items: start; }
.revisio .sf-etiq { justify-self: start; }
/* Els codis d'article dins del text: es poden tocar per obrir-los. */
.codi-boto {
  display: inline-block; padding: 13px 3px; margin: -13px -1px; vertical-align: baseline;
  font-family: var(--sf-mono); font-size: .92em; font-weight: 600; color: var(--sf-tinta);
  text-decoration: underline; text-decoration-color: var(--sf-filet-fort); text-underline-offset: 3px;
  background: none; border: 0; cursor: pointer; line-height: 1.2;
}

/* ═══ Hover (només amb ratolí) ═══════════════════════════════════════════ */
@media (hover: hover) {
  .cella:not([aria-pressed='true']):hover { background: var(--sf-paper-2); }
  .codi-boto:hover, .enllac-calcul:hover, .enllac-xifra:hover { text-decoration-color: currentColor; }
  .xifra-boto:hover { text-decoration-color: var(--sf-filet-fort); }
}

/* ═══ Ordinador: la matriu baixa, perquè la llista es vegi a la primera pantalla ═══ */
@media (min-width: 901px) {
  .matriu-cap { margin-bottom: var(--sf-e2); }
  .matriu__col { padding-bottom: 4px; }
  .matriu__col span { display: inline; margin-left: 6px; }
  .matriu { grid-template-columns: minmax(150px, 1.15fr) repeat(3, minmax(0, 1fr)); }
  .matriu__esq { padding-bottom: 4px; }
  .matriu__fila { display: flex; align-items: center; gap: 8px; padding-top: 4px; padding-bottom: 4px; }
  .matriu__fila span { display: inline; }
  .cella { min-height: 36px; padding-top: 5px; padding-bottom: 4px; }
  .llista th .sf-etiq { display: inline; margin: 0 0 0 4px; }
  .llista .c-codi { width: 68px; }
  .llista .c-classe { width: 50px; }
  .llista .c-venut { width: 122px; white-space: nowrap; }
  .llista .c-model { width: 100px; }
  .llista td { padding-top: 6px; padding-bottom: 6px; }
  /* Amplades fixes: la negreta de la regla triada no mou les columnes en canviar de regla. */
  .cmp { table-layout: fixed; }
  .cmp thead th:first-child { width: 22%; }
  .cmp thead th { white-space: nowrap; }
  .cella__n { font-size: 26px; }
  .cerca-fila { display: flex; align-items: center; gap: var(--sf-e2) var(--sf-e4); margin-top: var(--sf-e3); }
  .cerca-fila .cerca { flex: 1 1 230px; margin: 0; }
  .cerca-fila .llista-compte { flex: 1 1 220px; margin: 0; line-height: 1.35; }
  .sf-taula.llista th { padding-top: 6px; padding-bottom: 6px; }
}

/* ═══ Pantalles mitjanes ════════════════════════════════════════════════ */
@media (max-width: 1240px) and (min-width: 901px) {
  .origen { margin-left: 0; }
  .controls { grid-template-columns: minmax(0, 1fr); gap: var(--sf-e3); }
}

/* ═══ Mòbil ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .zona { grid-template-rows: auto auto auto auto auto; }
  .llenc { height: 340px; }
}
@media (max-width: 760px) {
  .eines-article { flex-direction: column; align-items: stretch; gap: var(--sf-e3); padding-top: var(--sf-e3); padding-bottom: var(--sf-e3); }
  .article__nom { white-space: normal; font-size: 17px; }
  .article__trad { display: block; margin: 2px 0 0; }
  .llenc__avis { top: 40px; left: 52px; right: 12px; max-width: none; }
  .article__codi { white-space: normal; }
  .vistes { display: grid; grid-template-columns: 1fr 1fr; }
  .vistes .sf-segment { white-space: normal; line-height: 1.2; }
  .eines-vista { padding-top: var(--sf-e3); padding-bottom: var(--sf-e3); }
  .eines-vista__grup > .sf-boto, .eines-vista__grup > .sf-segments { width: 100%; }
  #politica { display: grid; grid-template-columns: 1fr 1fr; }
  #politica .sf-segment { white-space: normal; line-height: 1.2; padding: 4px 10px; }
  .origen { margin-left: 0; }
  .llenc { height: 320px; }
  .cmp th, .cmp td { padding: 7px 4px; font-size: var(--sf-t-nota); }
  .cmp thead th { font-size: var(--sf-t-petit); white-space: normal; }
  .cmp tbody th { white-space: normal; }
  .xifres__nom { font-size: var(--sf-t-petit); min-height: 2.6em; }
  .xifres .sf-comptador__nom { font-size: var(--sf-t-petit); }
  .controls { grid-template-columns: minmax(0, 1fr); gap: var(--sf-e4); }
  .pestanyes { gap: var(--sf-e4); }
  .pestanyes .llarg { display: none; }
  .pestanyes .curt { display: inline; }
  .matriu { grid-template-columns: 66px repeat(3, minmax(0, 1fr)); }
  .matriu__col { padding: 0 6px 6px; }
  .matriu__fila { padding-right: 6px; }
  .cella { display: grid; align-content: start; gap: 3px; padding: 8px 6px; min-height: 62px; }
  .cella__n { font-size: 26px; }
  .matriu-cap .sf-boto--text, .llista-compte .sf-boto--text, .conjunt__accio { min-height: 44px; }
  .xifra-boto { min-height: 44px; }
  .enllac-calcul, .enllac-xifra { padding: 13px 0; margin: -13px 0; }
  .xifres__peu { margin-top: 0; font-size: var(--sf-t-petit); }
  .llista-compte .sf-boto--text { display: flex; }
  .llista .c-venut, .llista .c-model, .llista td.venut, .llista td.model { display: none; }
  .llista .c-codi { width: 70px; }
  .llista .c-classe { width: 54px; }
  .revisio { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .conjunt .sf-xifra { font-size: 28px; }
}

/* ═══ Impressió ═════════════════════════════════════════════════════════ */
@media print {
  .sf-llenc { height: 95mm; }
  .eines-vista, .controls, .pestanyes, .sf-peu-panell .sf-boto, .mes-files, .cerca, .vistes, .lectura, .llenc__estat { display: none !important; }
  .sf-desplacable { max-height: none; }
}