/* Produir amb la llum barata · 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 d'un diagrama de Gantt sobre la corba del preu: a dalt,
   el preu de cada quart d'hora (tinta, 1,5 px); al mig, un carril per tasca
   amb un bloc negre per a cada cop; a baix, la potència que demana la planta.
   El terra és NOMÉS la tasca triada: el contorn del bloc i el que paga sota
   la corba del preu. */

/* ═══ La zona: eines, dies (només a la vista «Dia»), llenç i llegenda ════ */
.sf-zona { grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); }
/* Ordinador baix (1024 × 768): el llenç no s'encongeix per sota del que cal per dibuixar-ho tot; si no hi cap, la zona fa scroll. */
/* max-content i no auto: amb auto, si no hi cap tot, la graella encongeix les eines i la llegenda fins al seu min-height. */
@media (min-width: 901px) { .sf-zona { grid-template-rows: max-content max-content max-content max-content minmax(480px, 1fr) max-content; overflow-y: auto; } }
/* Sense això, la columna del panell es fa tan ampla com la taula i surt per la dreta al mòbil. */
.sf-panell { grid-template-columns: minmax(0, 1fr); }
.sf-zona > .eines { grid-row: 1; }
.sf-zona > .resultat { grid-row: 2; }
.sf-zona > .guia-lloc { grid-row: 3; }
.sf-zona > .dies { grid-row: 4; }
.sf-zona > .llenc { grid-row: 5; }
.sf-zona > .peu-zona { grid-row: 6; }
@media (max-width: 900px) { .sf-zona { grid-template-rows: repeat(6, auto); } }
.guia-lloc { min-width: 0; }
.guia-lloc:empty { display: none; }

/* El resultat sota els plans: només al mòbil (a l'ordinador, els comptadors del panell ja hi són). */
.resultat { display: none; }
@media (max-width: 760px) {
  .resultat:not([hidden]) {
    display: grid; gap: 2px;
    padding: 10px var(--sf-gutter) 12px;
    border-bottom: var(--sf-linia) solid var(--sf-filet);
    font-size: var(--sf-t-nota); line-height: 1.4; color: var(--sf-gris-fort);
  }
  .resultat__dif { color: var(--sf-tinta); font-size: var(--sf-t-cos); }
  .resultat__xifra { font-family: var(--sf-serif); font-weight: 400; font-size: 30px; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: lining-nums; white-space: nowrap; margin-right: 2px; }
}

.eines { gap: var(--sf-e3) var(--sf-e4); }
.vistes { margin-left: auto; }
/* Optimitzat és el botó que fa la feina: contorn de tinta, encara sense prémer. */
.sf-segment--clau[aria-pressed='false'] { border-color: var(--sf-tinta); color: var(--sf-tinta); font-weight: 600; }
.sf-segment:disabled { color: var(--sf-gris); border-color: var(--sf-filet); cursor: not-allowed; background: var(--sf-paper); }
.plans .curt { display: none; }
/* Si la zona és estreta (ordinador petit), «Retocat» curt perquè les eines càpiguen en una fila. */
.sf-zona > .eines { container-type: inline-size; }
@container (max-width: 560px) { .plans .llarg { display: none; } .plans .curt { display: inline; } }

.dies { gap: 6px; }
.dies .dia { min-width: 64px; font-variant-numeric: tabular-nums; }
/* Zona estreta (ordinador petit): els set dies en una fila. Al mòbil ho torna a decidir el bloc del mòbil. */
.sf-zona > .dies { container-type: inline-size; }
@container (max-width: 560px) { .dies .dia { min-width: 0; padding-left: 8px; padding-right: 8px; } }
.dia__n { font-weight: 600; }

/* ═══ El gràfic ═════════════════════════════════════════════════════════ */
.sf-llenc.llenc { background: var(--sf-paper); }
.grafic { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.grafic text { font-family: var(--sf-sans); font-variant-numeric: tabular-nums; }

.grafic .g-torn { fill: var(--sf-paper-2); }
.grafic .g-linia { stroke: var(--sf-filet); stroke-width: 1; shape-rendering: crispEdges; }
.grafic .g-zero { stroke: var(--sf-filet-fort); stroke-width: 1; shape-rendering: crispEdges; }
.grafic .g-dia { stroke: var(--sf-filet-fort); stroke-width: 1; shape-rendering: crispEdges; }
.grafic .g-hora { stroke: var(--sf-filet); stroke-width: 1; shape-rendering: crispEdges; }
.grafic .g-carril { stroke: var(--sf-filet); stroke-width: 1; shape-rendering: crispEdges; }
.grafic .g-text { fill: var(--sf-gris); font-size: 13px; }
.grafic .g-eix { fill: var(--sf-gris-fort); font-size: 13px; }
.grafic .g-eix--dia { fill: var(--sf-tinta); font-weight: 600; }
.grafic .g-carril-nom { fill: var(--sf-tinta); font-size: 14px; font-weight: 600; letter-spacing: -.005em; }
.grafic .g-halo { paint-order: stroke; stroke: var(--sf-paper); stroke-width: 4px; stroke-linejoin: round; }
/* Un carril amb cops que no hi caben ho diu al mateix carril. */
.grafic .g-nohicap { fill: var(--sf-error); font-size: 13px; }

/* El preu: una línia d'esglaons, un esglaó per quart d'hora. */
.grafic .g-preu { fill: none; stroke: var(--sf-tinta); stroke-width: 1.5; stroke-linejoin: miter; }
/* El que paga la tasca triada: l'àrea sota el preu mentre dura. */
.grafic .g-paga { fill: var(--sf-terra); fill-opacity: .2; }

/* La potència que demana la planta i la contractada. */
.grafic .g-carrega { fill: var(--sf-paper-3); stroke: var(--sf-gris); stroke-width: 1; }
.grafic .g-limit { stroke: var(--sf-tinta); stroke-width: 1; stroke-dasharray: 5 4; shape-rendering: crispEdges; }
.grafic .g-sobre { fill: var(--sf-error); }

/* On era «com sempre» la tasca triada. */
.grafic .g-fantasma { fill: none; stroke: var(--sf-gris); stroke-width: 1; stroke-dasharray: 3 3; }
.grafic .g-passa { stroke: var(--sf-tinta); stroke-width: 1; stroke-dasharray: 2 3; pointer-events: none; }

/* Els blocs: un <g> per cop, es mou amb transform. */
.grafic .cop { cursor: grab; outline: none; touch-action: none; }
.grafic .cop--arrossegant { cursor: grabbing; }
.grafic .cop--amagat { display: none; }
.grafic .cop__toc { fill: transparent; pointer-events: all; }
.grafic .cop__barra { fill: var(--sf-tinta); }
.grafic .cop--error .cop__barra { fill: var(--sf-error); }
.grafic .cop__nom { fill: var(--sf-paper); font-size: 13px; font-weight: 600; pointer-events: none; }
.grafic .cop__cost { fill: var(--sf-tinta); font-size: 14px; font-weight: 600; pointer-events: none; paint-order: stroke; stroke: var(--sf-paper); stroke-width: 4px; stroke-linejoin: round; }
.grafic .cop__anell { fill: none; stroke: var(--sf-terra); stroke-width: 2; visibility: hidden; pointer-events: none; }
.grafic .cop--triat .cop__anell,
.grafic .cop.sf-assenyalat .cop__anell { visibility: visible; }
/* El focus del teclat: el mateix contorn, puntejat si el bloc no és el triat. */
.grafic .cop:focus-visible .cop__anell { visibility: visible; }
.grafic .cop:not(.cop--triat):focus-visible .cop__anell { stroke-dasharray: 3 2; }
.grafic .cop.sf-assenyalat { outline: none !important; }
@media (hover: hover) {
  .grafic .cop:not(.cop--triat):hover .cop__barra { fill: #2e2e2e; }
}

/* Només quan el visitant canvia de pla: els blocs van al lloc nou. */
.grafic.anima .cop, .grafic.anima .cost-triat { transition: transform var(--sf-transicio); }
@media (prefers-reduced-motion: reduce) { .grafic.anima .cop, .grafic.anima .cost-triat { transition: none; } }

/* La nota del quart d'hora que hi ha sota el ratolí. */
.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;
}
.info b { display: block; font-weight: 600; font-size: var(--sf-t-cos); font-variant-numeric: tabular-nums; }
.info span { display: block; color: #d9d9d6; }

.llenc__estat { position: absolute; inset: 0; background: var(--sf-paper); }

/* ═══ La llegenda ═══════════════════════════════════════════════════════ */
.llegenda { gap: var(--sf-e2) var(--sf-e5); }
.sf-llegenda > span.llegenda__grup { display: inline-flex; align-items: center; gap: 6px var(--sf-e3); flex-wrap: wrap; white-space: normal; min-width: 0; }
.llegenda__grup > span:not(.sf-etiq) { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.llegenda i { display: inline-block; flex: none; }
.llegenda .l-preu { width: 18px; height: 0; border-top: 1.5px solid var(--sf-tinta); }
.llegenda .l-tasca { width: 18px; height: 9px; background: var(--sf-tinta); }
.llegenda .l-torn { width: 14px; height: 14px; background: var(--sf-paper-2); border: 1px solid var(--sf-filet); }
.llegenda .l-limit { width: 18px; height: 0; border-top: 1px dashed var(--sf-tinta); }
.llegenda .l-paga { width: 14px; height: 14px; background: rgba(166, 61, 38, .2); border-top: 1.5px solid var(--sf-tinta); }
/* La nota dels preus, a la dreta de la segona fila de la llegenda. */
.llegenda__nota { margin-left: auto; color: var(--sf-gris); }

/* ═══ El panell ═════════════════════════════════════════════════════════ */
.cap { min-width: 0; }
.setmana { padding: var(--sf-e4) var(--sf-gutter) 0; }
.setmana__fila { display: flex; align-items: center; gap: var(--sf-e2) var(--sf-e3); flex-wrap: wrap; }
.setmana__nom { font-size: var(--sf-t-nota); font-weight: 600; color: var(--sf-tinta); margin-right: var(--sf-e1); }
.setmana .sf-nota { margin-top: var(--sf-e2); }

.comptadors { --llum-xifra: 34px; }
.comptadors .sf-xifra { font-size: var(--llum-xifra); }
.comptador--dif { grid-column: 1 / -1; }
.comptador--dif .sf-xifra { font-size: 52px; }
/* Sense xifra: un guió de text, prou visible perquè no sembli un error. Fa l'alçada
   de la xifra del costat, perquè «Com sempre» i «Optimitzat» quedin a la mateixa línia. */
.comptadors .comptador--buit .sf-xifra { font-family: var(--sf-sans); font-size: 28px; line-height: var(--llum-xifra); color: var(--sf-gris); }
.comptador__motiu { flex-basis: 100%; color: var(--sf-gris-fort); }
.resum { padding: 0 var(--sf-gutter) var(--sf-e4); color: var(--sf-gris-fort); }
.avisos { display: grid; gap: var(--sf-e2); padding: 0 var(--sf-gutter); }
.avisos:not(:empty) { padding-bottom: var(--sf-e4); max-height: 32vh; overflow-y: auto; }
.avisos .sf-avis { font-size: var(--sf-t-nota); padding: 8px 12px; }

/* La tasca triada */
.detall { padding-bottom: var(--sf-e5); margin-bottom: var(--sf-e2); border-bottom: var(--sf-linia) solid var(--sf-filet); }
.detall__cap { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sf-e3); }
.detall__nom { font-size: var(--sf-t-h3); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.detall__quan { font-size: var(--sf-t-cos); color: var(--sf-gris-fort); margin-top: 2px; }
.detall__xifres { display: flex; align-items: baseline; gap: var(--sf-e2) var(--sf-e4); flex-wrap: wrap; margin-top: var(--sf-e3); }
.detall__cost { font-family: var(--sf-serif); font-size: 34px; line-height: 1; letter-spacing: -.01em; font-variant-numeric: lining-nums; white-space: nowrap; }
.detall__preu { font-size: var(--sf-t-cos); color: var(--sf-gris-fort); font-variant-numeric: tabular-nums; }
.detall__xifres .sf-etiq { margin-left: auto; }
.detall__sempre { display: flex; align-items: center; gap: var(--sf-e2); margin-top: var(--sf-e2); font-size: var(--sf-t-nota); color: var(--sf-gris-fort); font-variant-numeric: tabular-nums; }
/* El mateix rectangle puntejat que marca al gràfic on era la tasca. */
.detall__sempre::before { content: ''; flex: none; width: 18px; height: 10px; border: 1px dashed var(--sf-gris); }
.detall__regla { margin-top: var(--sf-e3); font-size: var(--sf-t-nota); }
.mou { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sf-e4); }
.mou .sf-boto { min-width: 64px; font-variant-numeric: tabular-nums; }
.mou__tornar { margin-left: auto; }

/* La taula de tasques */
.tasques { margin-top: var(--sf-e2); }
.taula td { padding-top: 7px; padding-bottom: 7px; }
.taula .cost { color: var(--sf-gris-fort); }
.taula tr[aria-selected='true'] .cost { color: var(--sf-tinta); }
.tasca__nom { display: block; font-weight: 600; }
.tasca__cops { display: block; font-size: var(--sf-t-petit); color: var(--sf-gris); }
/* Sobre el fons gris de la fila triada, el gris normal no arriba a 4,5:1. */
.taula tr[aria-selected='true'] .tasca__cops { color: var(--sf-gris-fort); }
.camp { height: 36px; padding: 0 8px; font-size: var(--sf-t-cos); }
.camp--kw { width: 76px; }
.camp--hores { width: 64px; }
.camp[aria-invalid='true'] { border-color: var(--sf-error); color: var(--sf-error); }
.taula__nota { margin-top: var(--sf-e2); }
.taula__nota-linia { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--sf-e2); }
.error-camps { color: var(--sf-error); margin-top: var(--sf-e2); }

.potencia { margin-top: var(--sf-e5); padding-top: var(--sf-e4); border-top: var(--sf-linia) solid var(--sf-filet); }
.potencia__nom { justify-content: flex-start; align-items: center; color: var(--sf-tinta); font-weight: 600; }
.amb-unitat { display: flex; align-items: center; gap: var(--sf-e2); }
.amb-unitat .camp { width: 96px; height: var(--sf-control); }
.amb-unitat__u { font-size: var(--sf-t-cos); color: var(--sf-gris-fort); }

/* Com es calcula */
/* Sense vora de baix: el filet de sota és el de la primera nota (sf-reglat). */
.calcul { margin-top: var(--sf-e4); padding: var(--sf-e4) 0; border-top: var(--sf-linia) solid var(--sf-filet); }
.calcul > p + p, .calcul > p + div { margin-top: var(--sf-e2); }
.calcul b { color: var(--sf-tinta); font-weight: 600; }
/* La fórmula es parteix entre terme i terme (mai dins de «320 kW»), i el resultat no es perd mai pel costat. */
.formula { font-family: var(--sf-mono); font-size: var(--sf-t-nota); line-height: 1.6; padding: 10px 12px; background: var(--sf-paper-2); color: var(--sf-gris-fort); }
.formula > span { white-space: nowrap; }
.formula b { color: var(--sf-tinta); font-weight: 600; }
.calcul__suma { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--sf-e2); font-size: var(--sf-t-nota); color: var(--sf-gris-fort); }
.preus-tram { border-collapse: collapse; font-size: var(--sf-t-nota); font-variant-numeric: tabular-nums; }
.preus-tram th, .preus-tram td { padding: 3px 0 3px 18px; text-align: right; white-space: nowrap; }
.preus-tram th:first-child { padding-left: 0; text-align: left; }
.preus-tram thead th { font-weight: 400; color: var(--sf-gris); border-bottom: var(--sf-linia) solid var(--sf-filet-fort); }
.preus-tram tbody th { font-weight: 600; color: var(--sf-tinta); }
.preus-tram td { color: var(--sf-gris-fort); }
.calcul__fitxers { margin-top: var(--sf-e3); }
.calcul__fitxers a { color: inherit; overflow-wrap: anywhere; }
.calcul__notes { margin-top: 0; }

/* El que encerta i el que no */
.revisio__titol { margin: var(--sf-e5) 0 var(--sf-e2); }
.revisio__titol:first-child { margin-top: 0; }

/* ═══ «Prova això» a l'ordinador ════════════════════════════════════════
   Com a les altres demos amb una barra d'eines a la zona principal: a partir
   de 901 px, la carcassa la posa dins de #guia-lloc, sota la barra d'eines de
   la zona (iniciar({ guia: { lloc } }), a app.js), amb el seu aspecte. Al mòbil
   i a la tauleta, la franja de baix de la carcassa. */
/* «Com funciona» ja és a la barra de dalt: aquí no es repeteix. */
.guia-lloc .sf-guia__peu .sf-boto--text { display: none; }

/* ═══ Tauleta (761–900 px) ══════════════════════════════════════════════
   La barra de la carcassa en una fila tallava el títol en sec («Produir amb
   la llum l») i els botons el tapaven: aquí, com al mòbil, el títol té la
   seva fila i els tres botons van a sota. (Ho hem apuntat per a _comu.) */
@media (min-width: 761px) and (max-width: 900px) {
  .sf-barra { flex-wrap: wrap; gap: 0 var(--sf-e3); padding-top: var(--sf-e2); padding-bottom: var(--sf-e2); }
  .sf-barra__titols { min-height: 44px; align-items: center; }
  .sf-barra__titol { white-space: normal; flex: 1 1 auto; }
  .sf-barra__accions { flex: 1 0 100%; margin: var(--sf-e1) 0 0; }
}

/* ═══ Mòbil ═════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .vistes { display: none; }
  .plans { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plans .sf-segment { padding: 0 6px; }
  .plans .llarg { display: none; }
  .plans .curt { display: inline; }
  .dies { padding-top: 6px; padding-bottom: 6px; justify-content: space-between; gap: 4px; flex-wrap: nowrap; }
  .dies .dia { min-width: 44px; width: 44px; height: 48px; padding: 0; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
  .dies .dia__nom { font-size: var(--sf-t-petit); }
  .dies .dia__n { font-size: var(--sf-t-cos); }

  .llegenda { gap: 6px var(--sf-e4); }
  .llegenda__nota { margin-left: 0; }
  /* Les tres pestanyes hi caben senceres sense haver de desplaçar-les. */
  .panell .sf-pestanyes { gap: var(--sf-e3); }
  .comptadors { --llum-xifra: 27px; }
  .comptador--dif .sf-xifra { font-size: 40px; }
  .detall__cost { font-size: 30px; }
  .mou .sf-boto { min-width: 0; flex: 1 1 0; padding: 0 4px; }
  .mou__tornar { flex: 1 1 100% !important; margin-left: 0; }
  .camp { height: 44px; }
  .camp--kw { width: 62px; }
  .camp--hores { width: 54px; }
  .taula th, .taula th.n { white-space: normal; }
  .tasca__nom { font-size: var(--sf-t-nota); }
  .taula th, .taula td { padding-left: 4px; padding-right: 4px; }
  .taula .cost { font-size: var(--sf-t-nota); }
  .amb-unitat .camp { height: 44px; }
}

/* ═══ Impressió ═════════════════════════════════════════════════════════ */
@media print {
  .sf-llenc.llenc { height: 120mm; }
  .eines, .dies, .sf-pestanyes, .mou, .sf-peu-panell, .info, .setmana__fila .sf-segment:not([aria-pressed='true']) { display: none !important; }
  .sf-desplacable .sf-vista[hidden] { display: none !important; }
  .grafic .cop__anell { visibility: hidden; }
  /* La tasca triada no es parteix entre dues pàgines (el nom en una i el cost en l'altra). */
  .comptadors, .detall { break-inside: avoid; }
}