@layer ficha {

@scope (.cos-ficha) {
:scope { --realce: var(--il-taronja); }
.pg { height: 100%; display: grid; gap: 4mm; }
.pg-carrer { grid-template-rows: minmax(0, 68fr) minmax(0, 138fr); }
.pg-un { grid-template-rows: minmax(0, 164fr) minmax(0, 82fr); }
.pg .ex-cos { display: grid; grid-template-columns: minmax(0, 1fr); }


.carrer { display: grid; grid-template-columns: 28mm 28mm minmax(0, 1fr); gap: 3mm; min-height: 0; }
.carter-c { border-radius: var(--radi); }
.cartell-model { 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); }
.cartell-model .lletra-gran { font-size: 17mm; }
.cases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 2mm; min-height: 0; border-bottom: 3mm solid var(--il-verd-fosc); }
.casa { padding: 0; border: 0; background: transparent; border-radius: 0; min-height: 0; }
.casa svg { width: 100%; height: 100%; }
.paret { fill: var(--il-sorra); stroke: var(--il-contorn); stroke-width: 3; stroke-linejoin: round; }
.porta { fill: var(--il-marro); stroke: var(--il-contorn); stroke-width: 3; }
.casa.on .paret { fill: var(--acento); }
.casa.on text { fill: var(--paper); }
.a1 { height: 76%; } .a2 { height: 100%; } .a3 { height: 88%; } .a4 { height: 100%; } .a5 { height: 70%; }


.tires-ex { display: grid; grid-template-columns: minmax(0, 1fr) 45mm; gap: 5mm; min-height: 0; }
.tires { display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 3mm; min-height: 0; }
.tira-n { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; padding: 1.5mm 2mm; background: var(--il-groc); border: var(--gruix) solid var(--il-contorn); border-radius: 3mm; min-height: 0; }
.cinta-n { display: grid; place-items: center; padding: 0; margin: 0; min-height: 0; border: 0; border-right: 1px dashed var(--il-contorn); border-radius: 0; background: transparent; }
.cinta-n:last-child { border-right: 0; }
.cinta-n .lletra-gran { font-size: 11mm; }
.cinta-n.on { background: var(--acento); color: var(--paper); }
.gat-n { border-radius: var(--radi); }


.dibuix-un { display: grid; grid-template-columns: 48mm minmax(0, 1fr); gap: 5mm; min-height: 0; }
.nen-n { border-radius: var(--radi); }
.graella-un { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(7, minmax(0, 1fr)); gap: 2mm; padding: 3mm; background: var(--il-cel); border: var(--gruix) solid var(--il-contorn); border-radius: var(--radi); min-height: 0; }
.cel-n { display: grid; place-items: center; padding: 0; min-height: 0; border-radius: 3mm; background: var(--il-blanc); }
.cel-n .lletra-gran { font-size: 10mm; }
.cel-n.on { background: var(--acento); color: var(--paper); }


.pautes-un { display: grid; grid-template-columns: 40mm minmax(0, 1fr); gap: 4mm; min-height: 0; }
.nena-n { border-radius: var(--radi); }
.dos-pautes { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 4mm; min-height: 0; }
.pauta-n { --h: 100%; display: flex; align-items: center; gap: 8mm; height: 100%; padding: 0 4mm; background-color: var(--paper); }
.pauta-n .model { font-size: 14mm; }

}
}