@layer ficha {

@scope (.cos-ficha) {
:scope { --realce: var(--il-groc); }
.pg { height: 100%; display: grid; gap: 4mm; }
.pg-serp { grid-template-rows: minmax(0, 70fr) minmax(0, 136fr); }
.pg-files { grid-template-rows: minmax(0, 92fr) minmax(0, 154fr); }
.pg .ex-cos { display: grid; grid-template-columns: minmax(0, 1fr); }


.inici-s { display: grid; grid-template-columns: 44mm minmax(0, 1fr); gap: 4mm; min-height: 0; }
.serp-s { border-radius: var(--radi); }
.zigzag { display: grid; grid-template-columns: 28mm repeat(5, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 2.5mm; min-height: 0; }
.model-s { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1mm; background: var(--realce); border: var(--gruix) solid var(--il-contorn); border-radius: var(--radi); }
.model-s .lletra-gran { font-size: 15mm; }
.carta-s { display: grid; place-items: center; padding: 0; height: 66%; border-radius: var(--radi); }
.carta-s .lletra-gran { font-size: 13mm; }
.z1, .z3, .z5 { align-self: start; }
.z2, .z4 { align-self: end; }


.camp-s { display: grid; grid-template-columns: minmax(0, 1fr) 38mm; gap: 5mm; min-height: 0; }
.mosaic-s { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 3mm; padding: 3mm; background: var(--il-herba); border: var(--gruix) solid var(--il-contorn); border-radius: var(--radi); min-height: 0; }
.tesela { display: grid; place-items: center; padding: 0; min-height: 0; border-radius: 4mm; background: var(--il-blanc); }
.tesela .lletra-gran { font-size: 13mm; }
.tesela.on { background: var(--acento); color: var(--paper); }
.t1 { grid-area: 1 / 1 / 2 / 2; }
.t2 { grid-area: 1 / 2 / 2 / 4; }
.t3 { grid-area: 1 / 4 / 3 / 5; }
.t4 { grid-area: 2 / 1 / 4 / 3; }
.t4 .lletra-gran { font-size: 30mm; }
.t5 { grid-area: 2 / 3 / 3 / 4; }
.t6 { grid-area: 3 / 3 / 4 / 4; }
.t7 { grid-area: 3 / 4 / 4 / 5; }
.t8 { grid-area: 4 / 1 / 5 / 2; }
.t9 { grid-area: 4 / 2 / 5 / 4; }
.t10 { grid-area: 4 / 4 / 5 / 5; }
.t3 .lletra-gran { font-size: 20mm; }
.t2 .lletra-gran, .t9 .lletra-gran { font-size: 17mm; }
.llagosta-s { border-radius: var(--radi); }


.triar-s { display: grid; grid-template-columns: 38mm minmax(0, 1fr); gap: 5mm; min-height: 0; }
.gat-s { border-radius: var(--radi); }
.tres-files { display: grid; grid-template-columns: 30mm minmax(0, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 3mm; min-height: 0; }
.model-fila-s { grid-row: 1 / 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3mm; background: var(--realce); border: var(--gruix) solid var(--il-contorn); border-radius: var(--radi); }
.model-fila-s .lletra-gran { font-size: 22mm; }
.tres-files .tria { grid-column: 2; }
.tres-files .tria { display: grid; grid-template-columns: 8mm minmax(0, 1fr); align-items: center; gap: 3mm; padding: 0 4mm; background: var(--il-cel); border: var(--gruix) solid var(--il-contorn); border-radius: var(--radi); min-height: 0; }
.tres-files .tria input { width: 7mm; height: 7mm; }
.tres-files .tria span { display: flex; justify-content: space-around; align-items: center; }
.tres-files .tria .lletra-gran { font-size: 13mm; }


.escriure-s { display: grid; grid-template-columns: 38mm minmax(0, 1fr); gap: 4mm; min-height: 0; }
.nena-s { border-radius: var(--radi); }
.s-gran { display: grid; grid-template-rows: minmax(0, 1fr) 26mm; gap: 3mm; min-height: 0; }
.punts-s > svg { width: 100%; height: 100%; min-height: 0; }
.punts-s { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); padding: 3mm; border: var(--gruix) dashed var(--realce); border-radius: var(--radi); min-height: 0; }
.fil-s { fill: none; stroke: var(--il-contorn); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.1 6.5; }
.dues-s { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4mm; min-height: 0; }
.casella-s { background: var(--paper); border: var(--gruix) solid var(--il-contorn); border-radius: var(--radi); background-image: repeating-linear-gradient(90deg, var(--il-gris) 0 2mm, transparent 2mm 3.5mm); background-size: 100% 1px; background-position: 0 50%; background-repeat: no-repeat; min-height: 0; }

}
}