/* Com va el vostre sector · el que és d'aquesta app i de cap altra.
   Tot el que és comú (barra, botons, etiquetes, pestanyes…) és a ../_comu/comu.css.

   Tres columnes que omplen la finestra (a l'ordinador): el sector, el quadre
   del sector i les vostres vendes. El quadre són cinc franges apilades amb
   el mateix eix de temps, perquè el cursor caigui al mateix lloc a tots els
   gràfics. Al mòbil, tot en una columna. */

:root {
  --col-sectors: 232px;
  --col-vendes: 472px;
  /* El gràfic de vendes és el moment de la demo: es fa gran tant com deixa l'alçada. */
  --vendes-graf: clamp(150px, 24vh, 220px);
}
@media (max-width: 1399px) { :root { --col-sectors: 204px; --col-vendes: 420px; } }
@media (max-width: 1179px) { :root { --col-vendes: 360px; } }
/* El subtítol de la barra, sencer o res: per sota de 1440 px es tallava amb «…». */
@media screen and (max-width: 1439px) { .sf-barra__subtitol { display: none; } }

/* ═══ Les tres columnes ═════════════════════════════════════════════════ */
.sf-app { display: grid; }
.quadre {
  display: grid;
  grid-template-columns: var(--col-sectors) minmax(0, 1fr) var(--col-vendes);
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}
.col-sectors, .col-quadre, .col-vendes { min-width: 0; min-height: 0; }
.col-sectors { display: grid; grid-template-rows: auto minmax(0, 1fr); border-right: var(--sf-linia) solid var(--sf-filet); }
.col-quadre { display: grid; grid-template-rows: auto auto minmax(0, 1fr); border-right: var(--sf-linia) solid var(--sf-filet); container: quadre / inline-size; }
.col-vendes { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
/* Les zones que fan scroll per dins contenen el seu text amagat (.sf-amagat va
   amb position: absolute): si no, s'escapa i la pàgina sencera es pot moure. */
.col-sectors__cos, .indicadors, .col-vendes__cos { position: relative; }

/* ═══ «Prova això» (de _comu) ═══════════════════════════════════════════
   Com a les altres demos amb una barra d'eines a la zona principal: a partir de
   901 px, la carcassa la posa a #guia-lloc, sota la capçalera del sector
   (iniciar({ guia: { lloc } })), amb el seu aspecte. Només hi traiem «Com
   funciona», que ja és a la barra de dalt. */
.guia-lloc .sf-guia__peu .sf-boto--text { display: none; }

/* ═══ 1 · El sector ═════════════════════════════════════════════════════ */
.col-sectors__titol { padding: 16px var(--sf-e4) 8px var(--sf-gutter); }
/* La llista i la nota fan scroll juntes; a 1440 × 900 hi caben els 22 sectors. */
.col-sectors__cos { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.sectors { padding: 0 0 4px; }
.sectors:focus-visible { outline-offset: -2px; }
/* El marc del pas 1 de la guia, cap endins: la columna fa scroll i el retallava. */
@media (min-width: 901px) { #sectors.sf-assenyalat { outline-offset: -2px; } }
.sector {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px; align-items: baseline;
  width: 100%; min-height: 25px; padding: 3px var(--sf-e4) 4px calc(var(--sf-gutter) - 2px);
  border: 0; border-left: 2px solid transparent; background: none;
  font-size: var(--sf-t-nota); line-height: 1.3; text-align: left; color: var(--sf-gris-fort); cursor: pointer;
  transition: background-color var(--sf-transicio), color var(--sf-transicio);
}
.sector__codi { font-family: var(--sf-mono); font-size: var(--sf-t-petit); color: var(--sf-gris); font-variant-numeric: tabular-nums; }
/* El sector triat: l'única cosa terra de la pantalla. */
.sector[aria-pressed='true'] { border-left-color: var(--sf-terra); color: var(--sf-tinta); font-weight: 600; }
.sector[aria-pressed='true'] .sector__codi { color: var(--sf-tinta); }
.sector:focus-visible { outline-offset: -2px; }
.col-sectors__nota { padding: 10px var(--sf-e4) 12px var(--sf-gutter); border-top: var(--sf-linia) solid var(--sf-filet); line-height: 1.4; }

/* ═══ 2 · El quadre del sector ══════════════════════════════════════════ */
.cap-quadre { min-height: 72px; padding-top: var(--sf-e3); padding-bottom: var(--sf-e3); gap: var(--sf-e2) var(--sf-e4); }
.cap-quadre__titols { min-width: 0; flex: 1 1 280px; }
.cap-quadre__titols .sf-nota { margin-top: 3px; }
.indicadors { overscroll-behavior: contain; }

/* Una franja per indicador: el text a l'esquerra i el gràfic a la dreta. */
.ind {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-e4);
  padding: var(--sf-e5) var(--sf-gutter) 22px;
  border-bottom: var(--sf-linia) solid var(--sf-filet);
}
@container quadre (min-width: 620px) {
  .ind { grid-template-columns: minmax(230px, 33%) minmax(0, 1fr); gap: 0 28px; }
  /* Sense exportacions (el 33 és un servei): el títol, l'avís i la font, un sota l'altre. */
  .ind--buit { grid-template-columns: minmax(0, 1fr); gap: var(--sf-e2); }
}
.ind__text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.ind__text > * { max-width: 100%; }
.ind__sub { max-width: 44ch; }
.ind__ple { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; align-self: stretch; }
/* La xifra, amb el filet de tinta a sobre (el patró dels comptadors). */
.ind__xifra { align-self: stretch; margin-top: 6px; padding-top: 10px; border-top: var(--sf-linia) solid var(--sf-tinta); }
.ind__xifra .sf-comptador__nom { margin-top: 8px; }
/* El signe, en Archivo: el + i el − de la Bodoni són filets que no es veuen. */
.sf-xifra .signe { font-family: var(--sf-sans); font-weight: 500; margin-right: .06em; }
.ind__segona { font-size: var(--sf-t-cos); line-height: 1.4; color: var(--sf-gris-fort); }
.ind__segona b { font-weight: 600; color: var(--sf-tinta); font-variant-numeric: tabular-nums; }
.ind__nota { margin-top: 2px; }
.ind__dubte { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: var(--sf-t-nota); }
.ind__dubte-boto { font-size: var(--sf-t-nota); color: var(--sf-gris-fort); text-align: left; white-space: normal; }
.ind__control { display: grid; gap: 6px; margin-top: var(--sf-e2); }

.ind__grafic { display: flex; flex-direction: column; gap: var(--sf-e2); min-width: 0; }
/* El gràfic omple el que queda de la franja; l'SVG el redibuixa app.js. */
.grafic { position: relative; flex: 1 1 auto; min-height: 150px; max-height: 250px; cursor: crosshair; touch-action: pan-y; }
.grafic svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.grafic:focus-visible { outline-offset: 4px; }
.ind__font { max-width: 78ch; }
.ind__font .sf-etiq { margin-right: 2px; }
.ind__buit .sf-estat { min-height: 0; padding: var(--sf-e2) 0 var(--sf-e3); }
.ind--buit .ind__grafic { gap: 0; }

/* La lectura del cursor: el mes, i el valor de cada línia amb la seva mostra
   (fa de llegenda). Un lloc fix a sobre de cada gràfic. */
.lectura {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sf-e4);
  min-height: 21px; font-size: var(--sf-t-nota); line-height: 1.5; color: var(--sf-gris-fort);
  font-variant-numeric: tabular-nums;
}
.lectura__mes { color: var(--sf-tinta); font-weight: 600; min-width: 7.4em; }
.lectura__item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.lectura__item b { font-weight: 600; color: var(--sf-tinta); }
.lectura__buit { color: var(--sf-gris); }

.mostra { display: inline-block; flex: none; width: 18px; height: 0; border-top: 2px solid var(--sf-tinta); }
.mostra--comparacio { border-top-color: var(--sf-gris); }
.mostra--puntejada { border-top-style: dashed; }
.mostra--vendes { border-top-width: 3px; }
.mostra--barra { width: 8px; height: 11px; border: 0; background: var(--sf-gris-fort); }
.mostra--abans { background: var(--sf-filet-fort); }
.lectura__llegenda { color: var(--sf-gris); }

/* L'SVG dels gràfics */
.g-graella { stroke: var(--sf-filet); stroke-width: 1; }
.g-base { stroke: var(--sf-gris-suau); stroke-width: 1; stroke-dasharray: 3 3; }
.g-eix { stroke: var(--sf-filet-fort); stroke-width: 1; }
.g-text { fill: var(--sf-gris); font-family: var(--sf-sans); font-size: 13px; font-variant-numeric: tabular-nums; }
.g-text--halo { paint-order: stroke; stroke: var(--sf-paper); stroke-width: 4px; stroke-linejoin: round; }
.g-marca-v { stroke: var(--sf-gris-suau); stroke-width: 1; stroke-dasharray: 2 3; }
.g-linia { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.g-linia--principal { stroke: var(--sf-tinta); stroke-width: 2; }
.g-linia--comparacio { stroke: var(--sf-gris); stroke-width: 1.5; }
.g-linia--puntejada { stroke-dasharray: 4 3; stroke-linecap: butt; }
.g-linia--vendes { stroke: var(--sf-tinta); stroke-width: 2.5; }
.g-barra { fill: var(--sf-filet-fort); }
.g-barra--finestra { fill: var(--sf-gris-fort); }
.g-barra--cursor { fill: var(--sf-tinta); }
.g-cursor { stroke: var(--sf-gris); stroke-width: 1; }
.g-punt { stroke: var(--sf-paper); stroke-width: 1.5; }
.g-punt--principal { fill: var(--sf-tinta); }
.g-punt--comparacio { fill: var(--sf-gris); }
.g-punt--vendes { fill: var(--sf-paper); stroke: var(--sf-tinta); stroke-width: 2; }
.g-punt--ple { fill: var(--sf-tinta); stroke: var(--sf-paper); stroke-width: 2; }

/* On van les exportacions */
.paisos { display: grid; gap: 6px; margin-top: var(--sf-e1); }
.paisos__cap { display: flex; align-items: center; gap: var(--sf-e3); font-size: var(--sf-t-nota); font-weight: 600; color: var(--sf-tinta); }
.paisos__llista { list-style: none; display: grid; gap: 3px; }
.paisos__llista li {
  display: grid; grid-template-columns: minmax(92px, 9.5em) minmax(40px, 1fr) 4.6em 4.8em; align-items: center; gap: var(--sf-e3);
  font-size: var(--sf-t-nota); line-height: 1.5; color: var(--sf-gris-fort); font-variant-numeric: tabular-nums;
}
.paisos__barra i { display: block; height: 6px; background: var(--sf-gris-fort); }
.paisos__pes { text-align: right; color: var(--sf-tinta); font-weight: 600; }
.paisos__var { text-align: right; color: var(--sf-gris); }
.paisos__total { font-size: var(--sf-t-nota); color: var(--sf-gris); }

/* ═══ 3 · Les vostres vendes ════════════════════════════════════════════ */
/* Les tres pestanyes, sempre a la vista i en una sola línia. */
.col-vendes .sf-pestanyes { gap: var(--sf-e5); overflow: visible; }
.col-vendes .sf-pestanya { padding-top: 14px; padding-bottom: 12px; }
@media (max-width: 1399px) { .col-vendes .sf-pestanyes { gap: var(--sf-e4); } .col-vendes .sf-pestanya { font-size: var(--sf-t-nota); } }
@media (max-width: 1179px) { .col-vendes .sf-pestanyes { gap: var(--sf-e3); } }
@media (max-width: 420px) { .col-vendes .sf-pestanyes { gap: var(--sf-e3); } }
.vista-vendes { display: flex; flex-direction: column; }
.vendes-qui { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.vendes-qui__nom { font-size: var(--sf-t-h3); font-weight: 600; letter-spacing: -.015em; }
.vendes-qui__nota { flex: 1 0 100%; }
.vendes-nota { margin-top: var(--sf-e2); padding-left: var(--sf-e3); border-left: 2px solid var(--sf-filet-fort); }
/* El gràfic i el seu any de referència: a l'ordinador, fixos a dalt de la columna. */
.vendes-fix { margin-top: 4px; padding-top: 6px; background: var(--sf-paper); }
@media (min-width: 901px) {
  .vendes-fix { position: sticky; top: 0; z-index: 2; padding-bottom: var(--sf-e4); border-bottom: var(--sf-linia) solid var(--sf-filet); }
}
.vendes-cap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sf-e2) var(--sf-e3); }
.vendes-cap .sf-segment:disabled { opacity: .4; cursor: default; }
.grafic-vendes { margin-top: var(--sf-e2); }
.grafic-vendes:focus-visible { outline-offset: 4px; }
.grafic-vendes__llenc { position: relative; height: var(--vendes-graf); cursor: pointer; }
.grafic-vendes__llenc svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.anys-eix { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.anys-eix button {
  min-height: 34px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: var(--sf-t-nota); color: var(--sf-gris); font-variant-numeric: tabular-nums;
  transition: color var(--sf-transicio), background-color var(--sf-transicio);
}
.anys-eix button[aria-pressed='true'] { color: var(--sf-tinta); font-weight: 600; }
.anys-eix button:focus-visible { outline-offset: -2px; }

/* La diferència en punts i el volum, a sota del gràfic (a la part fixa). */
.vendes-clau { display: grid; gap: 6px; margin-top: var(--sf-e3); padding-top: var(--sf-e3); border-top: var(--sf-linia) solid var(--sf-tinta); }
.vendes-clau p { font-size: var(--sf-t-cos); line-height: 1.45; color: var(--sf-gris-fort); }
.vendes-clau b { color: var(--sf-tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
.vendes-clau .vendes-clau__dif { font-size: var(--sf-t-h3); line-height: 1.35; color: var(--sf-tinta); }
.vendes-clau .vendes-clau__falta { font-size: var(--sf-t-h3); line-height: 1.35; color: var(--sf-tinta); }
.vendes-clau .vendes-clau__avis { font-size: var(--sf-t-nota); color: var(--sf-tinta); }

/* Les frases: cadascuna amb la mostra de la seva línia (fan de llegenda). */
.resultat { list-style: none; display: grid; gap: 8px; margin-top: var(--sf-e3); font-size: var(--sf-t-cos); line-height: 1.45; color: var(--sf-gris-fort); }
.resultat li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 0 10px; }
.resultat li > .mostra { margin-top: .72em; }
.resultat b { color: var(--sf-tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
.resultat .sf-etiq { vertical-align: baseline; }

.vendes-entrada { display: grid; gap: var(--sf-e3); margin-top: var(--sf-e6); padding-top: var(--sf-e4); border-top: var(--sf-linia) solid var(--sf-filet); }
.anys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--sf-e2) var(--sf-e4); }
.any { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 4px var(--sf-e2); }
.any label { font-size: var(--sf-t-nota); color: var(--sf-gris-fort); font-variant-numeric: tabular-nums; }
.any__error { grid-column: 1 / -1; font-size: var(--sf-t-petit); line-height: 1.35; color: var(--sf-error); }
.any .sf-entrada-text[aria-invalid='true'] { border-color: var(--sf-error); }

/* Com es calcula */
.calcul > li { display: grid; gap: 6px; }
.calcul__titol { font-size: var(--sf-t-cos); font-weight: 600; letter-spacing: -.005em; }
.formula {
  font-family: var(--sf-mono); font-size: var(--sf-t-petit); line-height: 1.5;
  padding: 8px 10px; background: var(--sf-paper-2); color: var(--sf-gris-fort); overflow-wrap: anywhere;
}
.formula__nom { display: block; font-family: var(--sf-sans); color: var(--sf-gris); }
.formula b { color: var(--sf-tinta); font-weight: 600; }
.calcul__nota { margin-top: var(--sf-e4); }

/* El que encerta i el que no (com a la plantilla) */
.revisio { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--sf-e3); align-items: start; }
.revisio .sf-etiq { justify-self: start; }
.revisio--assenyalat { background: var(--sf-paper-2); }
.revisio:focus { outline: none; }
@media (max-width: 420px) { .revisio { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* ═══ Hover (només amb ratolí) ══════════════════════════════════════════ */
@media (hover: hover) {
  .sector:hover { background: var(--sf-paper-2); color: var(--sf-tinta); }
  .anys-eix button:hover { color: var(--sf-tinta); background: var(--sf-paper-2); }
}

/* ═══ Pantalles petites i mòbil: una columna, amb scroll de pàgina ══════ */
@media (max-width: 900px) {
  .quadre { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .col-sectors, .col-quadre { border-right: 0; border-bottom: var(--sf-linia) solid var(--sf-filet); }
  .col-sectors { display: block; }
  .col-sectors__titol { padding: 14px var(--sf-gutter) 4px; }
  .col-sectors__cos { overflow: visible; }
  /* Els sectors, en una tira que fa scroll de costat. */
  .sectors {
    display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
    padding: 6px var(--sf-gutter) 14px; scroll-padding: 0 var(--sf-gutter); scrollbar-width: none;
  }
  .sectors::-webkit-scrollbar { display: none; }
  .sector {
    flex: none; width: auto; grid-template-columns: auto auto; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 14px; border: var(--sf-linia) solid var(--sf-filet-fort); border-radius: var(--sf-radi);
    white-space: nowrap; scroll-snap-align: start;
  }
  .sector[aria-pressed='true'] { border-color: var(--sf-tinta); box-shadow: inset 2px 0 0 var(--sf-terra); }
  .col-sectors__nota { display: none; }
  .cap-quadre__botons { flex: 1 0 100%; margin-left: 0; display: grid; grid-template-columns: 1fr 1fr; }
  .cap-quadre__botons .sf-boto { white-space: normal; text-align: center; }
  .grafic { flex: none; height: 170px; min-height: 0; max-height: none; }
  .grafic-vendes__llenc { height: 200px; }
  .any { grid-template-columns: 40px minmax(0, 1fr); }
  /* Al mòbil, el resultat (la diferència i el volum) va just a sobre dels camps:
     amb el teclat obert, és el que es veu mentre s'escriu. */
  .vendes-fix, .vendes-entrada { display: contents; }
  .vendes-qui { order: 1; } .vendes-nota { order: 2; } .vendes-cap { order: 3; margin-top: var(--sf-e3); }
  .grafic-vendes { order: 4; } .resultat { order: 5; } .vendes-intro { order: 6; margin-top: var(--sf-e6); }
  .vendes-clau { order: 7; margin-top: var(--sf-e4); } .anys { order: 8; margin-top: var(--sf-e4); } .vendes-botons { order: 9; margin-top: var(--sf-e4); }
}
@media (pointer: coarse) {
  .anys-eix button { min-height: 44px; }
  .peu-panell { min-height: 44px; }
  .ind__dubte-boto { min-height: 44px; }
}
@media (max-width: 760px) {
  .ind { padding-top: var(--sf-e4); }
  .paisos__llista li { grid-template-columns: minmax(80px, 8em) minmax(30px, 1fr) 4.4em 4.6em; gap: var(--sf-e2); }
}

/* ═══ Impressió (A4): dues pàgines plenes ════════════════════════════════
   Les mateixes franges que a la pantalla (el text a l'esquerra i el gràfic a la
   dreta: a l'amplada del paper, la columna fa més de 620 px). Tres franges a la
   primera pàgina; les altres dues i la comparació de vendes a la segona. */
@media print {
  .quadre { display: block; }
  .col-quadre, .col-vendes { display: block; border: 0; }
  .guia-lloc { display: none; }
  .cap-quadre { min-height: 0; padding: 0 0 3mm; border-bottom: 1px solid #111; }
  .indicadors { display: block; overflow: visible; }
  .ind { grid-template-columns: 40% minmax(0, 1fr); padding: 3.5mm 0; border-bottom: 1px solid #e3e3e0; break-inside: avoid; gap: 2mm 6mm; }
  .ind--buit { grid-template-columns: minmax(0, 1fr); }
  /* Les exportacions: els països passen a sota del text, i la font a sota del gràfic. */
  #t-exportacions:not(.ind--buit) .ind__grafic { display: contents; }
  #t-exportacions:not(.ind--buit) .ind__text { grid-column: 1; grid-row: 1 / span 2; }
  #t-exportacions:not(.ind--buit) #l-exportacions { grid-column: 2; grid-row: 1; }
  #t-exportacions:not(.ind--buit) #g-exportacions { grid-column: 2; grid-row: 2; }
  #t-exportacions:not(.ind--buit) #paisos { grid-column: 1; grid-row: 3; margin-top: 0; }
  #t-exportacions:not(.ind--buit) #f-exportacions { grid-column: 2; grid-row: 3; align-self: end; }
  #t-exportacions .paisos__llista li { grid-template-columns: 6.6em minmax(16px, 1fr) 3.9em 4.3em; gap: 2mm; }
  .ind__text { gap: 3px; }
  .ind__xifra { margin-top: 2px; padding-top: 6px; }
  .sf-xifra { font-size: 28px; }
  .grafic { flex: none; height: 34mm; min-height: 0; max-height: none; }
  .col-vendes { padding: 4mm 0 0; break-inside: avoid; }
  .col-vendes__cos { overflow: visible; }
  /* La comparació de vendes: el gràfic i el resultat a l'esquerra; qui és la
     línia i el que ha fet cada línia, a la dreta. */
  .col-vendes #vista-vendes, .col-vendes #vista-vendes[hidden] {
    display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 6mm; align-items: start; padding: 0;
  }
  .vendes-qui { grid-column: 2; grid-row: 1; }
  .vendes-nota { grid-column: 2; grid-row: 2; }
  .vendes-fix { display: block; grid-column: 1; grid-row: 1 / span 4; position: static; border: 0; padding: 0; margin: 0; }
  .resultat { grid-column: 2; grid-row: 3; margin-top: 3mm; }
  .vendes-clau .vendes-clau__dif { font-size: 11pt; }
  #vista-calcul, #vista-revisio, .vendes-entrada { display: none !important; }
  .anys-eix button { min-height: 0; padding: 1mm 0; }
  .grafic-vendes__llenc { height: 36mm; }
}