@media (min-width: 1024px) {
  :root {
    --content-max-width: 750px;
    --sidebar-width: 400px;
  }
}

.plotly {
  width: 100%;
  height: 60vh;
}

/* Mode docent: guió d'explicació, ocult per defecte i activable amb el botó
   de la barra superior (docent.js). Els alumnes no el veuen mai. */
.docent {
  display: none;
}

body.docent-on .docent {
  display: block;
  margin: 1.5rem 0;
  padding: 0.8rem 1rem 0.8rem 1.2rem;
  border-left: 4px solid var(--quote-border, #7a7a7a);
  background: var(--quote-bg, rgba(128, 128, 128, 0.08));
  border-radius: 3px;
  font-size: 0.95em;
}

body.docent-on .docent::before {
  content: "Guió docent";
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
}

body.docent-on .docent > *:first-of-type {
  margin-top: 0;
}

body.docent-on .docent > *:last-child {
  margin-bottom: 0;
}

body.docent-on .docent ul {
  margin: 0.3rem 0;
}
/* Ampliació de figures i codi (zoom.js): mostrar un diagrama o un bloc de codi
   a pantalla completa mentre s'explica, sense la resta de la pàgina al voltant. */
.zoomable {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.zoomable-block {
  display: block;
  width: 100%;
}

.zoomable > pre {
  display: block;
}

/* a pantalla completa el gràfic ocupa tot l'escenari, no els 60vh de la pàgina.
   align-self evita que el centrat del flex li encongeixi l'alçada. */
.zoom-stage > .zoom-plot {
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.zoom-img {
  cursor: zoom-in;
}

.zoom-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 4px 6px;
  border: 1px solid var(--quote-border, #7a7a7a);
  border-radius: 4px;
  background: var(--bg, #fff);
  color: var(--fg, #333);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.15s ease-in-out;
}

.zoomable:hover .zoom-btn,
.zoom-btn:focus-visible {
  opacity: 0.85;
}

.zoom-btn:hover {
  opacity: 1;
}

#zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: var(--bg, #fff);
}

.zoom-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: auto;
}

/* només la figura de primer nivell: Plotly i mermaid tenen svg interns que no
   s'han de tocar */
.zoom-stage > img,
.zoom-stage > svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Ampliació dins de l'overlay (zoom.js), per a imatges i diagrames mermaid. El
   zoom del navegador no hi arriba: Ctrl+/Ctrl- estan desactivats a pantalla
   completa. */
.zoom-stage > img,
.zoom-stage > svg,
.zoom-stage > pre.mermaid > svg {
  transform-origin: center center;
  will-change: transform;
  /* sense això, arrossegar la figura engega l'arrossegament natiu del navegador
     (o, amb el dit, el desplaçament de la pàgina) en comptes del nostre */
  -webkit-user-drag: none;
  user-select: none;
  touch-action: none;
}

/* Res no ha de fer scroll mentre desplacem una figura: ho fa zoom.js amb
   translate(). L'scroll del navegador només arriba cap avall i cap a la dreta,
   i deixaria la part alta de la figura ampliada fora de l'abast. El <pre> del
   mermaid també hi entra: hereta overflow: auto de la regla general dels blocs
   de codi ampliats. */
#zoom-overlay.zoom-has-figure .zoom-stage,
#zoom-overlay.zoom-has-figure .zoom-stage > pre.mermaid {
  overflow: hidden;
}

/* Un diagrama s'obre ocupant tota l'amplada de la pantalla i creix cap avall
   tant com calgui: és com es llegeix millor amb un projector. L'alçada la marca
   la proporció del viewBox, i el que sobresurt es veu desplaçant-lo. */
.zoom-stage > pre.mermaid > svg.zoom-fit-width,
.zoom-stage > svg.zoom-fit-width {
  width: 100%;
  height: auto;
  align-self: center;
  flex: 0 0 auto;
}

#zoom-overlay.zoom-pannable .zoom-stage > img,
#zoom-overlay.zoom-pannable .zoom-stage > svg,
#zoom-overlay.zoom-pannable .zoom-stage > pre.mermaid > svg {
  cursor: grab;
}

#zoom-overlay.zoom-panning .zoom-stage > img,
#zoom-overlay.zoom-panning .zoom-stage > svg,
#zoom-overlay.zoom-panning .zoom-stage > pre.mermaid > svg {
  cursor: grabbing;
}

.zoom-hint {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  margin: 0;
  color: var(--fg, #333);
  font-size: 1.3rem;
  text-align: center;
  opacity: 0.35;
  pointer-events: none;
}

.zoom-stage > pre.mermaid > svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

body.zoom-open {
  overflow: hidden;
}

.zoom-stage pre.mermaid {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zoom-stage pre {
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  line-height: 1.45;
}

.zoom-close {
  position: absolute;
  top: 12px;
  right: 18px;
  padding: 0 0.4em 0.15em;
  border: none;
  background: none;
  color: var(--fg, #333);
  font-size: 2.2rem;
  line-height: 1;
  opacity: 0.5;
  cursor: pointer;
}

.zoom-close:hover {
  opacity: 1;
}

@media print {
  .zoom-btn {
    display: none;
  }
}

/* Ampliació del text seleccionat (tecla z) */
.zoom-text {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.zoom-text-body {
  max-width: 100%;
  line-height: 1.3;
  text-align: left;
  text-wrap: balance;
}

.zoom-text-short {
  text-align: center;
}

/* el contenidor per defecte s'ajusta al contingut; els blocs de codi volen
   tota l'amplada perquè el seu fons arribi a les vores */
.zoom-text-body.zoom-fill {
  width: 100%;
}

.zoom-text-body > *:first-child {
  margin-top: 0;
}

.zoom-text-body > *:last-child {
  margin-bottom: 0;
}

/* dins de l'ampliació la mida la mana el contenidor: fitText hi posa una mida
   de lletra en píxels i el text l'ha de seguir. */
.zoom-text-body p,
.zoom-text-body li,
.zoom-text-body code {
  font-size: inherit;
  line-height: inherit;
}

/* Els encapçalaments conserven la jerarquia, en em perquè creixin i minvin amb
   la mida que hi posa fitText. Més continguda que la del navegador (h1 a 2em):
   com més gran és l'encapçalament, més ha d'encongir la resta del fragment
   perquè hi càpiga tot. Els marges del tema (2.5em) també es retallen, que a
   pantalla completa deixaven forats enormes entre encapçalament i text. */
.zoom-text-body h1,
.zoom-text-body h2,
.zoom-text-body h3,
.zoom-text-body h4,
.zoom-text-body h5,
.zoom-text-body h6 {
  line-height: 1.15;
  margin-block-start: 0.8em;
  margin-block-end: 0.35em;
}

.zoom-text-body h1 { font-size: 1.5em; }
.zoom-text-body h2 { font-size: 1.3em; }
.zoom-text-body h3 { font-size: 1.15em; }

.zoom-text-body h4,
.zoom-text-body h5,
.zoom-text-body h6 {
  font-size: 1.05em;
}

/* L'escenari duu la classe `content` de mdbook (zoom.js), i per això el
   fragment ampliat es veu igual que a la pàgina: color dels enllaços,
   encapçalaments sense subratllar i la còpia amagada que mdbook posa dins de
   cada imatge. El que no en volem és la caixa: `.content` reserva 50px de
   coixí a baix, que a pantalla completa és espai mort i descentra el
   contingut. */
.zoom-stage.content {
  padding: 0;
}

/* `.content` dona 1.45em a les llistes, i dins de l'ampliació la interlínia la
   mana el contenidor: fitText hi compta les línies que hi caben. */
.zoom-stage.content ul,
.zoom-stage.content ol {
  line-height: inherit;
}

/* la selecció ampliada conserva els contenidors originals (ul, ol, table, pre) */
.zoom-text-body ul,
.zoom-text-body ol {
  padding-left: 1.5em;
  margin: 0;
  text-align: left;
}

.zoom-text-body li {
  margin: 0.25em 0;
}

.zoom-text-body pre,
.zoom-text-body code {
  font-family: var(--mono-font, monospace);
}

/* Un bloc de codi ampliat ocupa tota l'amplada: no té sentit deixar marges
   laterals amb el fons de la pàgina. Conserva els salts de línia i la
   indentació tal com són; qui s'ajusta és la mida de lletra, no el text. */
.zoom-text-body > pre {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  overflow: hidden;
  white-space: pre;
}

/* les taules mantenen l'estil de mdbook (capçalera, files alternes, vores);
   aquí només evitem que la vora de la pàgina les encongeixi */
.zoom-text-body table {
  margin: 0 auto;
}

/* El nostre botó viu dins la barra de mdbook, al costat del de copiar. La mida
   la donen les regles de mdbook (pre > .buttons button); només ajustem la icona
   perquè ocupi el mateix que la del porta-retalls (21px). */
.zoom-code-button svg {
  width: 21px;
  height: 20px;
}

/* Quan el contingut no hi cap ni a la mida mínima llegible, es pot desplaçar
   en comptes de quedar tallat o d'encongir-se fins a ser il·legible. */
.zoom-text.zoom-scroll {
  overflow: auto;
  scrollbar-width: thin;
}

/* Només quan sobresurt per baix: el contingut comença a dalt perquè es pugui
   recórrer sencer. Si només sobresurt de costat, es queda centrat com sempre;
   moure'l amunt per un desbordament horitzontal fa un salt que no s'explica. */
.zoom-text.zoom-scroll-y {
  place-items: start center;
}

.zoom-text.zoom-scroll > .zoom-text-body > pre {
  overflow: visible;
}

.zoom-text:focus,
.zoom-text:focus-visible {
  outline: none;
}

/* Finestra de projecció (botó de la barra de dalt). És una finestra a part que
   carrega els mateixos fulls d'estil que els apunts, així que el fragment
   projectat es veu igual: aquí només li donem el marc, perquè no té ni barra
   lateral ni contingut al voltant. */
html.zoom-window,
html.zoom-window body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

html.zoom-window body {
  box-sizing: border-box;
  padding: 1.2rem;
  background: var(--bg, #fff);
  color: var(--fg, #333);
}

/* La pista viu al peu de la finestra, no de l'overlay */
html.zoom-window .zoom-hint {
  position: fixed;
}

/* Una figura projectada s'ha de veure sencera: aquí no es pot arrossegar com a
   l'overlay, així que s'encaixa a la finestra i prou. El marge que mdbook posa
   als blocs de codi sortiria de l'escenari i hi deixaria una barra de
   desplaçament que no porta enlloc. */
html.zoom-window .zoom-stage {
  overflow: hidden;
}

html.zoom-window .zoom-stage > pre {
  margin: 0;
}

/* Un gràfic projectat s'escala sencer (zoom.js li calcula el factor) i, com que
   el clon ja no respon, els botons de Plotly només farien nosa. */
html.zoom-window .zoom-plot-fitted {
  flex: 0 0 auto;
  transform-origin: center center;
}

html.zoom-window .modebar {
  display: none;
}

/* El botó del mode ha de dir si està engegat: mentre ho estigui, tot el que
   s'amplia se'n va a l'altra finestra i aquí no passa res visible. */
#zoom-projector-toggle[aria-pressed="true"] {
  color: var(--links, #4183c4);
}

/* ---------------------------------------------------------------------------
   Pissarra (tecla p): plafó per escriure markdown a classe. Només es veu en
   aquesta pantalla; el que veu la classe va a la finestra de projecció. */

#pissarra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900; /* per sota de l'ampliació (1000), per sobre dels apunts */
  display: none;
  flex-direction: column;
  height: 40vh;
  background: var(--bg, #fff);
  border-top: 2px solid var(--links, #4183c4);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
}

body.pissarra-oberta #pissarra {
  display: flex;
}

/* Els apunts s'aparten: amb el plafó a sobre, l'últim paràgraf de la pàgina
   quedaria tapat justament mentre s'escriu sobre ell. */
body.pissarra-oberta .page-wrapper {
  padding-bottom: 40vh;
}

.pissarra-barra {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.3rem 0.8rem;
  border-bottom: 1px solid var(--table-border-color, #ddd);
  font-size: 1.3rem;
}

.pissarra-titol {
  font-weight: bold;
}

.pissarra-tecles {
  opacity: 0.6;
}

/* Punt de color mentre hi ha canvis sense projectar: és l'única manera de
   saber si la classe ja veu el que s'acaba d'escriure. */
.pissarra-titol::after {
  content: "";
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-left: 0.5rem;
  border-radius: 50%;
  background: var(--links, #4183c4);
  vertical-align: middle;
}

#pissarra.pissarra-al-dia .pissarra-titol::after {
  background: transparent;
}

.pissarra-cos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  min-height: 0; /* sense això les dues columnes desborden el plafó */
}

.pissarra-editor {
  padding: 0.8rem;
  border: 0;
  border-right: 1px solid var(--table-border-color, #ddd);
  background: var(--bg, #fff);
  color: var(--fg, #333);
  font-family: var(--mono-font, monospace);
  font-size: 1.5rem;
  line-height: 1.5;
  resize: none;
  outline: none;
}

.pissarra-previsual {
  padding: 0.8rem 1.2rem;
  overflow: auto;
}

.pissarra-previsual > *:first-child {
  margin-top: 0;
}

/* Els diagrames de la previsualització es dibuixen a la mida que els dona
   mermaid, que en aquesta caixa mig plafó sol ser massa gran. */
.pissarra-previsual svg {
  max-width: 100%;
  height: auto;
}

/* El text d'ajuda va al CSS i no al contingut: la previsualització ha de poder
   quedar buida de debò, o Ctrl+Enter enviaria l'ajuda a la classe. */
.pissarra-previsual:empty::after {
  content: "Escriu markdown aquí. Ctrl+Enter ho projecta.";
  opacity: 0.45;
}

/* Un diagrama projectat s'escala amb la mida de lletra (pissarra.js li posa
   l'amplada en em): el bloc que el conté no li ha de posar fons ni marges. */
.zoom-pissarra pre.mermaid {
  padding: 0;
  background: none;
}

.pissarra-tanca {
  padding: 0 0.4rem;
  border: 0;
  background: none;
  color: var(--fg, #333);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.5;
}

.pissarra-tanca:hover {
  opacity: 1;
}