/* ------------------------------------------------------------------
   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 {
  .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; }
}