/* ------------------------------------------------------------------
   KIT DE MARCA (sistema v1): peces d'exercici reutilitzables i la base de la
   il·lustració. Les fitxes les combinen lliurement dins de .cos-ficha; totes
   fan servir només tokens (tokens.css), així el B/N i la paleta els hereten.
   ------------------------------------------------------------------ */
@layer kit {
  /* ---------- seguretat (v7): condicions mínimes contra desbordaments. Cap decisió estètica; tot amb :where() (especificitat 0) i dins
     la capa kit, així qualsevol regla de la fitxa (capa ficha) mana. ---------- */
  :where(.cos-ficha) { overflow-wrap: break-word; }                                   /* regla 3: paraules/xifres llargues no surten de la caixa */
  :where(.cos-ficha *:not(input.r)),
  :where(.cos-ficha *:not(input.r))::before, :where(.cos-ficha *:not(input.r))::after { box-sizing: border-box; }   /* regla 1 (la casella .r conserva la seva geometria) */
  :where(.cos-ficha *:not(input, textarea, select, svg, img, canvas)) { min-width: 0; }   /* regla 2: un fill de grid/flex no eixampla la seva caixa pel contingut */
  .cos-ficha { font-size: 1em; line-height: var(--lh); color: var(--tinta); }
  .cos-ficha :is(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; }
  .cos-ficha :is(ul, ol) { padding: 0; list-style: none; }
  .cos-ficha :focus-visible { outline: 3px solid #f4b400; outline-offset: 2px; }
  .cos-ficha svg { display: block; }

  /* ---------- exercici: número + consigna ---------- */
  .ex { display: flex; flex-direction: column; gap: .5rem; min-height: 0; min-width: 0; }
  .ex-cap { display: flex; align-items: flex-start; gap: .55rem; }
  .num {
    flex: none; width: 1.9em; height: 1.9em; display: grid; place-items: center;
    background: var(--acento); color: var(--paper); border-radius: 50%; font-weight: 800; line-height: 1;
  }
  .cons { margin: 0; font-weight: 700; line-height: 1.35; padding-top: .2em; }
  .ex-cos { flex: 1; min-height: 0; min-width: 0; position: relative; }

  /* ---------- peces de marca ---------- */
  .etiqueta {
    display: inline-flex; align-items: center; gap: .3em; padding: .05em .75em; font-weight: 700; font-size: var(--t-s);
    background: var(--acento-suau); border: var(--gruix) var(--vora-bn) var(--acento); border-radius: 999px;
  }
  .recuadre { border: var(--gruix) var(--vora-bn) var(--acento); border-radius: var(--radi); padding: .6rem .9rem; background: var(--paper); }
  .recuadre.suau { background: var(--acento-suau); }
  .recuadre.punts { border-style: dashed; }
  .nota { border-left: 5px var(--vora-bn) var(--acento); background: var(--acento-suau); padding: .5rem .9rem; border-radius: 0 var(--radi) var(--radi) 0; }
  .nota b { color: var(--acento); }
  html[data-tema="bn"] .nota { background: none; }
  .cinta { display: inline-block; padding: .1em 1em; background: var(--acento); color: var(--paper); font-weight: 800; border-radius: .3em; }
  .pegatina {
    display: grid; place-items: center; text-align: center; border-radius: 50%; font-weight: 800; line-height: 1.05;
    background: var(--il-groc); color: var(--il-contorn); border: 3px solid var(--il-contorn);
    transform: rotate(var(--gir, -8deg)); box-shadow: 2px 3px 0 var(--il-ombra);
  }
  .linies { background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--pas, 2.2em) - 1.5px), var(--linia) calc(var(--pas, 2.2em) - 1.5px), var(--linia) var(--pas, 2.2em)); }
  .quadres {
    background-color: var(--paper); border: var(--gruix) solid var(--acento);
    background-image: linear-gradient(var(--il-gris) 1px, transparent 1px), linear-gradient(90deg, var(--il-gris) 1px, transparent 1px);
    background-size: var(--q, 6mm) var(--q, 6mm);
  }

  /* ---------- il·lustració ---------- */
  .img { display: block; width: 100%; height: auto; aspect-ratio: var(--ratio, 4/3); object-fit: contain; }
  .img.ph { object-fit: fill; }
  .il { display: block; width: 100%; height: 100%; overflow: visible; }
  .il .c { stroke: var(--il-contorn); stroke-width: var(--tra, 3); stroke-linejoin: round; stroke-linecap: round; }
  .il .nf { fill: none; }
  .il .f-contorn { fill: var(--il-contorn); }
  .il .f-blanc { fill: var(--il-blanc); }
  .il .f-vermell { fill: var(--il-vermell); }
  .il .f-taronja { fill: var(--il-taronja); }
  .il .f-groc { fill: var(--il-groc); }
  .il .f-verd { fill: var(--il-verd); }
  .il .f-verd-fosc { fill: var(--il-verd-fosc); }
  .il .f-herba { fill: var(--il-herba); }
  .il .f-blau { fill: var(--il-blau); }
  .il .f-blau-fosc { fill: var(--il-blau-fosc); }
  .il .f-cel { fill: var(--il-cel); }
  .il .f-lila { fill: var(--il-lila); }
  .il .f-rosa { fill: var(--il-rosa); }
  .il .f-marro { fill: var(--il-marro); }
  .il .f-pell { fill: var(--il-pell); }
  .il .f-sorra { fill: var(--il-sorra); }
  .il .f-gris { fill: var(--il-gris); }
  .il .f-ombra { fill: var(--il-ombra); }
  .il text { font-family: var(--tipus-text); font-weight: 800; fill: var(--il-contorn); text-anchor: middle; }

  /* ---------- respostes escrites ---------- */
  .r {
    font: inherit; color: inherit; text-align: center;
    width: calc(var(--n, 4) * 1ch + 1.6rem); height: 1.75em; padding: 0 .3rem;
    border: 0; border-bottom: var(--gruix) solid var(--linia); border-radius: 0; background: transparent;
  }
  .r.caixa { border: var(--gruix) solid var(--acento); border-radius: 8px; height: 2.1em; background: var(--paper); }
  .r.gran { font-size: var(--t-l); font-weight: 700; }

  /* ---------- tria (casella amb creu: es manté un radio per a l'elecció única) ---------- */
  .tria { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
  .tria input {
    appearance: none; -webkit-appearance: none; flex: none; margin: 0; position: relative;
    width: 1.15em; height: 1.15em; border: 2px solid var(--acento); border-radius: 3px; background: var(--paper);
  }
  .tria input:checked::before, .tria input:checked::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 125%; height: 2.5px; border-radius: 2px;
    background: var(--acento); transform: translate(-50%, -50%) rotate(45deg);
  }
  .tria input:checked::after { transform: translate(-50%, -50%) rotate(-45deg); }

  /* ---------- marca: tocar per marcar/desmarcar (encerclar, pintar, seleccionar) ---------- */
  button.marca {
    font: inherit; color: inherit; cursor: pointer; padding: .15em .8em; background: var(--paper);
    border: var(--gruix) solid var(--acento); border-radius: 999px;
  }
  button.marca.on { background: var(--acento); color: var(--paper); }
  .marca { cursor: pointer; }
  /* dins d'una il·lustració: <g class="marca"> amb un <ellipse class="halo"> que s'encén en marcar */
  .marca .halo { fill: none; stroke: var(--acento); stroke-width: 5; stroke-dasharray: 9 6; opacity: 0; pointer-events: none; transition: opacity .1s; }
  .marca:hover .halo { opacity: .35; }
  .marca.on .halo { opacity: 1; }
  .marca .cobreix { fill: transparent; stroke: none; } /* àrea tàctil invisible */
  /* pintar: un element amb classe .pinta s'omple amb l'accent en marcar-lo */
  .marca.pinta.on { fill: var(--acento); }

  /* ---------- arrossegar (xips i zones) ---------- */
  .banc { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding: .45rem .7rem; border: var(--gruix) dashed var(--acento); border-radius: var(--radi); min-height: 2.8em; }
  .arrossega {
    display: inline-flex; align-items: center; justify-content: center; gap: .3em; min-height: 1.9em; padding: 0 .85rem;
    border: var(--gruix) solid var(--linia); border-radius: 999px; background: var(--paper);
    cursor: grab; user-select: none; touch-action: none; font-weight: 700;
  }
  .arrossega.sel { outline: 3px solid #f4b400; outline-offset: 1px; }
  .arrossega.arrossegant { opacity: .3; }
  .arrossega-fantasma { position: fixed; z-index: 1000; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .28); transform-origin: 0 0; }
  .zona {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem;
    min-width: 3.2em; min-height: 2.5em; padding: .15rem .3rem;
    border: var(--gruix) dashed var(--acento); border-radius: 10px; background: var(--paper);
  }
  .zona.sobre, .banc.sobre { background: var(--acento-suau); outline: 2px dashed var(--acento); outline-offset: -2px; }
  .zona .arrossega { border-color: var(--acento); }

  /* ---------- unir amb fletxes (punts) ---------- */
  [data-uneix] { position: relative; }
  .uneix-linies { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 5; }
  .uneix-linies path { fill: none; stroke: var(--acento); stroke-width: 3.5; stroke-linecap: round; }
  .uneix-linies path.prov { opacity: .55; }
  .punt {
    flex: none; display: inline-block; width: 1.15em; height: 1.15em; border-radius: 50%; padding: 0; vertical-align: middle;
    border: 2.5px solid var(--acento); background: var(--paper); cursor: pointer; touch-action: none;
  }
  .punt:hover { background: var(--acento-suau); }
  .punt.conn, .punt.sel { background: var(--acento); }
  .punt.sel { box-shadow: 0 0 0 3px #f4b400; }

  /* ---------- retroalimentació d'autocorrecció (només pantalla; mai al paper) ---------- */
  html:not(.imprimint) .r.ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
  html:not(.imprimint) .r.reintent { border-color: var(--reintent); background: color-mix(in srgb, var(--reintent) 12%, transparent); }
  html:not(.imprimint) .tria.ok input { border-color: var(--ok); }
  html:not(.imprimint) .tria.reintent input { border-color: var(--reintent); border-style: dashed; }
  html:not(.imprimint) .marca.ok .halo { stroke: var(--ok); opacity: 1; stroke-dasharray: none; }
  html:not(.imprimint) .marca.reintent .halo { stroke: var(--reintent); opacity: 1; }
  html:not(.imprimint) button.marca.ok { border-color: var(--ok); }
  html:not(.imprimint) button.marca.reintent { border-color: var(--reintent); border-style: dashed; }
  html:not(.imprimint) .arrossega.ok { border-color: var(--ok); box-shadow: 0 0 0 2px var(--ok); }
  html:not(.imprimint) .arrossega.reintent { border-color: var(--reintent); border-style: dashed; }
  html:not(.imprimint) .punt.ok { border-color: var(--ok); }
  html:not(.imprimint) .punt.reintent { border-color: var(--reintent); }
  html:not(.imprimint) .uneix-linies path.ok { stroke: var(--ok); }
  html:not(.imprimint) .uneix-linies path.reintent { stroke: var(--reintent); stroke-dasharray: 8 6; }
  html[data-tema="bn"] .r.ok, html[data-tema="bn"] .r.reintent { background: none; }
}

/* ======================= v2 ======================= */
@layer kit {
  /* forat d'una imatge ràster pendent: mostra el nom de l'arxiu i la proporció exacta */
  .img-ph {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15em; text-align: center;
    width: 100%; aspect-ratio: var(--ratio, 4/3); padding: .3em; overflow: hidden;
    border: 2px dashed var(--il-contorn); border-radius: var(--radi);
    background: repeating-linear-gradient(45deg, var(--il-cel) 0 .7em, var(--paper) .7em 1.4em);
    color: var(--tinta); font-size: var(--t-xs); line-height: 1.25;
  }
  .img-ph b { font-size: var(--t-s); word-break: break-all; }

  /* capa: una imatge amb elements posicionats a sobre en % (recuadres, punts, talls, marques) */
  .capa { position: relative; width: 100%; aspect-ratio: var(--ratio, 4/3); }
  .capa > .img, .capa > .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .capa > [data-cal] { position: absolute; }
  .capa > .zona { padding: 0; min-height: 0; background: var(--paper); border-style: solid; }
  .capa-linies { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
  .capa-linies path { fill: none; stroke: var(--il-contorn); stroke-width: 2.2px; vector-effect: non-scaling-stroke; stroke-linecap: round; }
  .ancora { width: 1.1em; height: 1.1em; margin: -.55em 0 0 -.55em; border-radius: 50%; background: var(--il-contorn); border: 2px solid var(--paper); }

  /* talls de fracció sobre una imatge */
  .talls { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .talla { fill: transparent; stroke: none; }
  .talla.marca { cursor: pointer; }
  .talla.marca:hover { fill: var(--acento); fill-opacity: .2; }
  .talla.on, .talla.ombra { fill: var(--acento); fill-opacity: .55; }
  .talla.buida { fill: var(--paper); fill-opacity: .9; stroke: var(--tinta-suau); stroke-width: 1.4px; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
  .talla-linia { stroke: var(--il-contorn); stroke-width: 2.2px; vector-effect: non-scaling-stroke; stroke-linecap: round; pointer-events: none; }
  html:not(.imprimint) .talla.ok { stroke: var(--ok); stroke-width: 3px; vector-effect: non-scaling-stroke; }
  html:not(.imprimint) .talla.reintent { stroke: var(--reintent); stroke-width: 3px; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }

  /* mode calibratge (?calibra=1) */
  html.calibra .capa > [data-cal] { outline: 2px dashed #f4b400; outline-offset: 0; cursor: move; z-index: 9; }
  html.calibra .capa > [data-cal]:not([data-cal-tipus="punt"])::after { content: ""; position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; background: #f4b400; cursor: nwse-resize; }
  html.calibra .capa > [data-cal]::before { content: attr(data-cal); position: absolute; left: 0; top: -1.4em; font: 700 11px/1 var(--tipus-text); background: #f4b400; color: #1b1b1b; padding: 1px 4px; white-space: nowrap; }
  .cal-panell { position: fixed; left: 1rem; bottom: 1rem; z-index: 60; width: min(36rem, calc(100vw - 2rem)); padding: .6rem; background: #fff; border: 2px solid #f4b400; border-radius: 10px; box-shadow: 0 4px 18px rgba(0, 0, 0, .25); font: 13px/1.4 var(--tipus-text); color: #1b1b1b; }
  .cal-panell textarea { width: 100%; height: 8rem; font: 12px/1.35 ui-monospace, Consolas, monospace; }
  .cal-panell button { font: inherit; font-weight: 700; padding: .3rem .8rem; border-radius: 999px; border: 1.5px solid #1f3a5f; background: #fff; cursor: pointer; }
}

/* ---------- v3: lectoescriptura ---------- */
@layer kit {
  /* pauta d'escriptura: línia de dalt fina, línia mitjana de punts, línia de base contínua */
  .pauta {
    --h: 15mm; height: var(--h); position: relative;
    background:
      linear-gradient(var(--il-gris), var(--il-gris)) 0 0 / 100% 1px no-repeat,
      repeating-linear-gradient(90deg, var(--il-gris) 0 2mm, transparent 2mm 3.5mm) 0 50% / 100% 1px no-repeat,
      linear-gradient(var(--linia), var(--linia)) 0 100% / 100% var(--gruix) no-repeat;
  }
  /* model per repassar: lletra grisa amb contorn */
  .model {
    font-family: var(--tipus-marca); font-weight: 600; line-height: 1; color: var(--il-gris);
    -webkit-text-stroke: 2px var(--tinta-suau); paint-order: stroke fill; letter-spacing: .08em;
  }
  /* casella d'una lletra o sil·laba */
  .r.lletra { --n: 2; font-size: var(--t-xl); font-weight: 700; height: 1.45em; border: var(--gruix) solid var(--acento); border-radius: 8px; background: var(--paper); }
  .lletra-gran { font-family: var(--tipus-marca); font-weight: 800; line-height: 1; }
}

/* ------------------------------------------------------------------
   v8: peces per a exercicis OBERTS (només paper: Comprova no els corregeix). Escriptura lliure i dibuix.
   Les fitxes les combinen lliurement; l'auditor les tracta com a contingut (no com a forat).
   ------------------------------------------------------------------ */
@layer kit {
  .espai-obert { position: relative; display: block; min-width: 0; min-height: 0; background: var(--paper); border: var(--gruix) var(--vora-bn) var(--acento); border-radius: var(--radi); }
  .espai-obert.escriptura {
    min-height: calc(var(--linies, 3) * var(--pas, 10mm));
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--pas, 10mm) - 1.5px), var(--linia) calc(var(--pas, 10mm) - 1.5px), var(--linia) var(--pas, 10mm));
  }
  .espai-obert.dibuix { border-style: dashed; min-height: 25mm; }
  .ex-cos:has(> .espai-obert:only-child) { display: grid; }   /* un espai obert sol omple tot l'exercici (cap forat); si en comparteix, la fitxa en decideix l'alçada */
  .espai-etiqueta { position: absolute; left: .6rem; top: .35rem; font-size: var(--t-xs); font-weight: 700; color: var(--tinta-suau); }
}

/* ------------------------------------------------------------------
   v9: mecàniques ordena / situa / patró. Només comportament i una base mínima llegible (tot amb :where(), especificitat 0, i dins la capa kit):
   qualsevol regla de la fitxa mana. Cap d'elles imposa composició ni aspecte; en B/N no es depèn només del color (patrons i vores).
   ------------------------------------------------------------------ */
@layer kit {
  /* ordena: el pas es toca per numerar-lo; .ordre és la casella on apareix el número (en paper, una casella en blanc) */
  :where([data-ordena] .pas[data-pos]) { cursor: pointer; }
  :where(.ordre) {
    display: inline-grid; place-items: center; flex: none; min-width: 1.9em; height: 1.9em; padding: 0 .2em;
    border: var(--gruix) solid var(--acento); border-radius: 8px; background: var(--paper); font-weight: 800; line-height: 1;
  }
  html:not(.imprimint) :where(.pas.ok .ordre) { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--paper)); }
  html:not(.imprimint) :where(.pas.reintent .ordre) { border-color: var(--reintent); border-style: dashed; background: color-mix(in srgb, var(--reintent) 12%, var(--paper)); }

  /* situa: .situa-eix és la caixa que va de min a max (cada fitxa la dibuixa com vulgui o fa servir k.eix); els punts hi pengen en % */
  :where([data-situa]) { position: relative; cursor: crosshair; touch-action: manipulation; }
  :where(.situa-eix) { position: relative; }
  :where(.situa-diana) { display: none; }
  :where(.situa-fita, .situa-cursor) {
    position: absolute; z-index: 3; width: 1.2em; height: 1.2em; margin: -.6em 0 0 -.6em; border-radius: 50%; pointer-events: none;
  }
  :where(.situa-fita) { background: var(--acento); border: 2.5px solid var(--paper); box-shadow: 0 0 0 2px var(--acento); }
  :where(.situa-cursor) { border: 3px dashed #f4b400; }
  html:not(.imprimint) :where(.situa-fita.ok) { background: var(--ok); box-shadow: 0 0 0 2px var(--ok); }
  html:not(.imprimint) :where(.situa-fita.reintent) { background: var(--reintent); box-shadow: 0 0 0 2px var(--reintent); }

  /* k.eix(): recta numèrica base. .eix té marge lateral --m (cap per als números dels extrems); .situa-eix va de min a max; els números es posen amb calc() */
  .eix { --m: 2em; position: relative; padding: 0 var(--m) 1.9em; }
  .eix .situa-eix { height: 2.4em; }
  .eix-linia { position: absolute; left: 0; right: 0; top: 50%; height: 0; border-top: var(--gruix) solid var(--tinta); }
  .eix-marca { position: absolute; top: 50%; width: 0; height: .8em; margin-top: -.4em; border-left: 2px solid var(--tinta); }
  .eix-marca.llarga { height: 1.3em; margin-top: -.65em; border-left-width: 3px; }
  .eix-num { position: absolute; bottom: 0; left: calc(var(--m) + (100% - 2 * var(--m)) * var(--p)); transform: translateX(-50%); font-weight: 700; line-height: 1; white-space: nowrap; }

  /* patró: cel·les .marca amb estats; base neutra (la fitxa dibuixa la cel·la). Els estats es distingeixen també en B/N (ratlles, punts). */
  :where([data-patro] .marca) { cursor: pointer; }
  :where([data-patro] .marca.on) { background-color: var(--acento); }
  :where([data-patro] .marca[data-estat="2"]) {
    background-color: var(--paper);
    background-image: repeating-linear-gradient(45deg, var(--acento) 0 .22em, transparent .22em .5em);
  }
  :where([data-patro] .marca[data-estat="3"]) {
    background-color: var(--acento-suau);
    background-image: radial-gradient(var(--acento) 28%, transparent 30%); background-size: .6em .6em;
  }
  html:not(.imprimint) :where([data-patro] .marca.ok) { outline: 3px solid var(--ok); outline-offset: -3px; }
  html:not(.imprimint) :where([data-patro] .marca.reintent) { outline: 3px dashed var(--reintent); outline-offset: -3px; }
}

/* ------------------------------------------------------------------
   v12: base de composició compartida. Són les regles de maquetació que moltes fitxes copiaven al seu estil.css (infraestructura, no disseny).
   Viuen a la capa kit: qualsevol regla de la fitxa (capa ficha) mana. varietat.py ignora les regles que ja són aquí, de manera que
   mesura només el CSS propi de cada fitxa. Els valors són els que ja feien servir les fitxes (no hi ha canvi visual en les existents).
   ------------------------------------------------------------------ */
@layer kit {
  .im { position: relative; min-width: 0; min-height: 0; }
  .im > .img, .im > .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
  .capa > .im { position: absolute; inset: 0; }
  .frase { background: var(--acento-suau); border: var(--gruix) solid var(--acento); border-radius: var(--radi); display: flex; align-items: center; justify-content: center; gap: 2mm; font-size: var(--t-l); font-weight: 700; height: 14mm; }
  .frase .r { width: 1.8em; background: var(--paper); }
  .frase .r.caixa { height: 1.5em; }
  .fit .r.caixa { height: 100%; min-height: 0; max-height: 100%; box-sizing: border-box; line-height: 1; padding: 0; width: 100%; }
  .caixa-g { display: grid; gap: 3mm; padding: 2mm; border: var(--gruix) dashed var(--acento); border-radius: var(--radi); min-height: 0; }
  .lateral { display: grid; grid-template-columns: minmax(0, 1fr) 38mm; gap: 5mm; min-height: 0; }
  .lateral.esq { grid-template-columns: 38mm minmax(0, 1fr); }
  .arrossega { box-sizing: border-box; }
  .zona { box-sizing: border-box; }
}