@layer ficha {

@scope (.cos-ficha) {
:scope { --realce: var(--il-cel); }
.pg { height: 100%; display: grid; gap: 4mm; }
.pg-tasses { grid-template-rows: minmax(0, 104fr) minmax(0, 102fr); }
.pg-intrusa { grid-template-rows: minmax(0, 138fr) minmax(0, 108fr); }
.pg .ex-cos { display: grid; grid-template-columns: minmax(0, 1fr); }


.tasses-ex { display: grid; grid-template-columns: 38mm minmax(0, 1fr); gap: 5mm; min-height: 0; }
.gat-ta { border-radius: var(--radi); }
.files-ta { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 3mm; min-height: 0; }
.fila-ta { display: grid; grid-template-columns: 24mm 6mm repeat(4, minmax(0, 1fr)); gap: 3mm; padding: 2mm 3mm; background: var(--il-groc); border-radius: var(--radi); min-height: 0; }
.model-ta { display: grid; place-items: center; font-size: 16mm; background: var(--realce); border: var(--gruix) solid var(--il-contorn); border-radius: 3mm; }
.fl-ta { align-self: center; justify-self: center; width: 0; height: 0; border-top: 3mm solid transparent; border-bottom: 3mm solid transparent; border-left: 5mm solid var(--il-contorn); }
.fila-ta .tria { flex-direction: column; justify-content: center; gap: 1mm; background: var(--paper); border: var(--gruix) solid var(--il-contorn); border-radius: 2mm 2mm 12mm 12mm; min-height: 0; }
.fila-ta .tria span { display: grid; place-items: center; }
.fila-ta .tria .lletra-gran { font-size: 11mm; }


.marc-ex { display: grid; min-height: 0; }
.marc-cartes { display: grid; grid-template-columns: repeat(6, 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; }
.mc { display: grid; place-items: center; padding: 0; min-height: 0; border-radius: 3mm; background: var(--il-blanc); }
.mc .lletra-gran { font-size: 11mm; }
.mc.on { background: var(--acento); color: var(--paper); }
.m11 { grid-area: 1 / 1; } .m12 { grid-area: 1 / 2; } .m13 { grid-area: 1 / 3; } .m14 { grid-area: 1 / 4; } .m15 { grid-area: 1 / 5; } .m16 { grid-area: 1 / 6; }
.m21 { grid-area: 2 / 1; } .m26 { grid-area: 2 / 6; }
.m31 { grid-area: 3 / 1; } .m36 { grid-area: 3 / 6; }
.m41 { grid-area: 4 / 1; } .m42 { grid-area: 4 / 2; } .m43 { grid-area: 4 / 3; } .m44 { grid-area: 4 / 4; } .m45 { grid-area: 4 / 5; } .m46 { grid-area: 4 / 6; }
.centre-m { grid-area: 2 / 2 / 4 / 6; border-radius: var(--radi); }


.intrusos-ex { display: grid; grid-template-columns: 40mm minmax(0, 1fr); gap: 5mm; min-height: 0; }
.mestre-u { border-radius: var(--radi); }
.cinc-files { display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 3mm; min-height: 0; }
.fila-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3mm; padding: 2mm 3mm; background: var(--il-sorra); border-radius: var(--radi); min-height: 0; }
.car-in { display: grid; place-items: center; padding: 0; min-height: 0; border-radius: 3mm; background: var(--il-blanc); }
.car-in .lletra-gran { font-size: 12mm; }
.car-in.on { background: var(--acento); color: var(--paper); text-decoration: line-through; }


.escriure-uu { display: grid; grid-template-columns: 40mm minmax(0, 1fr); gap: 4mm; min-height: 0; }
.nen-uu { border-radius: var(--radi); }
.dues-gran-u { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) 26mm; gap: 3mm 4mm; min-height: 0; }
.punts-uu { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); padding: 3mm; border: var(--gruix) dashed var(--il-contorn); border-radius: var(--radi); min-height: 0; }
.punts-uu > svg { width: 100%; height: 100%; min-height: 0; }
.fil-uu { fill: none; stroke: var(--il-contorn); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.1 6.5; }
.casella-uu { 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; }

}
}
