/* ------------------------------------------------------------------
   MARC FIX (sistema v1): barra d'eines, full A4, capçalera, peu i botó Comprova.
   Això és la identitat de marca: les fitxes NO el poden canviar (el seu CSS només
   s'aplica dins de .cos-ficha). La pàgina A4 és la unitat: cada .pagina és un full
   de 210 x 297 mm amb capçalera, cos lliure (.cos-ficha) i peu.
   ------------------------------------------------------------------ */
@layer marc {
  *, *::before, *::after { box-sizing: border-box; }

  body { margin: 0; background: var(--taula); color: var(--tinta); font-family: var(--tipus-text); }

  /* ---------- eines (només pantalla) ---------- */
  .eines {
    position: sticky; top: 0; z-index: 20;
    display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center;
    padding: .55rem 1.2rem; background: rgba(250, 248, 244, .94); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--web-linia); color: var(--web-tinta);
    font: 15px/1 var(--tipus-text);
  }
  .eines-logo { font-family: var(--tipus-marca); font-size: 1.4rem; font-weight: 700; color: #1f3a5f; text-decoration: none; letter-spacing: -.01em; }
  .eines-logo span { color: #f26b3a; }
  .eines-enrere { color: var(--web-tinta); text-decoration: none; font-weight: 700; padding: .35rem .8rem; border-radius: 999px; background: #fff; border: 1.5px solid var(--web-linia); }
  .eines-enrere:hover { border-color: #1f3a5f; }
  .eines-accions { margin-left: auto; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
  .btn {
    font: inherit; cursor: pointer; text-decoration: none; display: inline-block;
    padding: .4rem .95rem; border-radius: 999px; font-weight: 700; font-size: .92rem;
    border: 1.5px solid var(--web-linia); background: #fff; color: var(--web-tinta); transition: border-color .12s, background .12s;
  }
  .btn:hover { border-color: #1f3a5f; }
  .btn[aria-pressed="true"] { background: #1f3a5f; border-color: #1f3a5f; color: #fff; }
  .btn-primari { background: #f26b3a; border-color: #f26b3a; color: #fff; }
  .btn-primari:hover { background: #e05a29; border-color: #e05a29; }
  .btn:focus-visible, .eines a:focus-visible { outline: 3px solid #f4b400; outline-offset: 2px; }
  @media (max-width: 720px) { .eines-accions { margin-left: 0; width: 100%; } }

  /* ---------- fulls A4 ---------- */
  .fulls-ext { overflow: hidden; padding: 1.2rem 0 5rem; }
  /* centrat pel punt mig i escalat des d'allà: en pantalles estretes el full A4 es redueix sencer */
  .fulls { position: relative; left: 50%; width: 210mm; margin-left: -105mm; transform-origin: top center; transform: scale(var(--esc, 1)); }
  .pagina {
    width: 210mm; height: 296.4mm; /* un pèl menys que 297 per evitar pàgines en blanc per arrodoniment */
    padding: 12mm 14mm 9mm;
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 4mm;
    background: var(--paper); overflow: hidden; margin: 0 auto 1.2rem;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .18);
    font-size: var(--fs); line-height: var(--lh);
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    break-after: page; page-break-after: always; break-inside: avoid;
  }
  .pagina:last-child { break-after: auto; page-break-after: auto; margin-bottom: 0; }

  /* cos lliure: aquí viu tot el disseny de la fitxa. Té mida coneguda (contenidor):
     les fitxes poden fer servir cqw / cqh per dimensionar-se respecte al full. */
  .cos-ficha { min-height: 0; min-width: 0; position: relative; container-type: size; container-name: cos; overflow: hidden; }

  /* ---------- capçalera fixa ---------- */
  .cap { border-bottom: 3px var(--vora-bn) var(--acento); padding-bottom: 3mm; }
  .cap-fila { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
  .marca-logo { font-family: var(--tipus-marca); font-weight: 700; letter-spacing: .01em; color: var(--marca); font-size: .95em; }
  .marca-logo span { color: var(--marca-2); }
  html[data-tema="bn"] .marca-logo span { color: #000; }
  .assig {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .1rem .8rem; border: var(--gruix) var(--vora-bn) var(--acento);
    background: var(--acento-suau); border-radius: 999px; font-size: .8em; font-weight: 700;
  }
  .svg-ico { width: 1.3em; height: 1.3em; display: block; }
  .assig .svg-ico { width: 1.1em; height: 1.1em; }
  .cap-cos { display: flex; gap: 1.2rem; align-items: center; }
  .cap-text { flex: 1; min-width: 0; }
  .cap h1 { margin: .35rem 0 .15rem; font-family: var(--tipus-text); font-size: 1.65em; line-height: 1.2; color: var(--tinta); }
  .objectiu { margin: 0 0 .5rem; color: var(--tinta-suau); font-size: .85em; line-height: 1.4; }
  .objectiu b { color: var(--acento); }
  html[data-tema="bn"] .objectiu b { color: #000; }
  .dades { display: flex; gap: 1.5rem; font-size: .85em; }
  .dades .camp { flex: 1; display: flex; gap: .4rem; align-items: baseline; }
  .dades .camp:last-child { flex: .6; }
  .dades .linia { flex: 1; border-bottom: 1.5px solid var(--linia); min-height: 1.4em; }
  /* segell de l'assignatura: icona dins d'un cercle, sempre al mateix lloc */
  .segell {
    flex: none; width: 19mm; height: 19mm; border-radius: 50%; display: grid; place-items: center;
    background: var(--acento-suau); border: 3px var(--vora-bn) var(--acento); color: var(--acento);
  }
  .segell .svg-ico { width: 62%; height: 62%; }

  /* capçalera reduïda de les pàgines 2, 3... (fulls solts: sempre porten el nom) */
  .cap-mini { display: flex; align-items: baseline; gap: 1rem; border-bottom: 2px var(--vora-bn) var(--acento); padding-bottom: .3rem; font-size: .8em; }
  .cap-mini strong { flex: none; }
  .cap-mini .camp { flex: 1; display: flex; gap: .4rem; align-items: baseline; }
  .cap-mini .linia { flex: 1; border-bottom: 1.5px solid var(--linia); min-height: 1.3em; }

  /* ---------- peu fix ---------- */
  .peu {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding-top: .35rem; border-top: 2px var(--vora-bn) var(--acento);
    font-size: .65em; line-height: 1.3; color: var(--tinta-suau);
  }
  .peu .peu-marca { font-family: var(--tipus-marca); font-weight: 700; color: var(--marca); font-size: 1.15em; }
  .peu .peu-marca span { color: var(--marca-2); }
  html[data-tema="bn"] .peu .peu-marca span { color: #000; }

  /* ---------- botó flotant «Comprova» (només pantalla) ---------- */
  .comprova-flotant {
    position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 30;
    display: flex; align-items: center; gap: .8rem; padding: .5rem .6rem .5rem 1rem;
    background: #fff; border: 1.5px solid var(--web-linia); border-radius: 999px; box-shadow: 0 4px 18px rgba(0, 0, 0, .2);
  }
  .comprova-flotant .puntuacio { font-weight: 700; color: #1f3a5f; font-size: .95rem; }
  .comprova-flotant .puntuacio:empty { display: none; }
  .comprova-flotant .btn { background: #f26b3a; border-color: #f26b3a; color: #fff; padding: .5rem 1.2rem; }
  .comprova-flotant .btn:hover { background: #e05a29; border-color: #e05a29; }
  html.imprimint .comprova-flotant { display: none; }

  /* ---------- impressió ---------- */
  @media print {
    body { background: #fff; }
    .eines, .no-print, .comprova-flotant, .anunci { display: none !important; }
    .fulls-ext { height: auto !important; padding: 0; overflow: visible; }
    .fulls { position: static; width: auto; margin: 0; transform: none !important; }
    .pagina { margin: 0; box-shadow: none; }
  }
}

@page { size: A4; margin: 0; }