@layer ficha {

@scope (.cos-ficha) {
:scope { --realce: var(--il-cel); }
.pg { height: 100%; display: grid; gap: 4mm; }
.pg-neu { grid-template-rows: minmax(0, 72fr) minmax(0, 134fr); }
.pg-taquilles { grid-template-rows: minmax(0, 128fr) minmax(0, 118fr); }
.pg .ex-cos { display: grid; grid-template-columns: minmax(0, 1fr); }


.ninots { display: grid; grid-template-columns: 38mm repeat(5, minmax(0, 1fr)); gap: 2.5mm; min-height: 0; }
.ninot-model { display: flex; flex-direction: column; align-items: center; background: var(--realce); border: var(--gruix) solid var(--il-contorn); border-radius: var(--radi); padding: 1mm 1mm 0; min-height: 0; }
.ninot-model svg { flex: 1; width: 100%; min-height: 0; }
.ninot { padding: 0; border: 0; background: transparent; border-radius: var(--radi); min-height: 0; }
.ninot-in { display: block; width: 100%; height: 100%; }
.ninot-svg { width: 100%; height: 100%; }
.neu-ninot { fill: var(--il-blanc); stroke: var(--il-contorn); stroke-width: 3; }
.ull-ninot { fill: var(--il-contorn); }
.nas-ninot { fill: var(--il-taronja); stroke: var(--il-contorn); stroke-width: 1.5; }
.ninot.on .neu-ninot { fill: var(--il-groc); }
.ninot.on { outline: 3px solid var(--acento); outline-offset: -3px; }


.pendent-ex { display: grid; grid-template-columns: minmax(0, 1fr) 40mm; grid-template-rows: auto minmax(0, 1fr); gap: 3mm 5mm; min-height: 0; }
.neu-banda { grid-column: 1 / 3; aspect-ratio: 7 / 1; border-radius: var(--radi); }
.pendent { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 3mm; padding: 3mm; background: var(--il-cel); border: var(--gruix) solid var(--il-contorn); border-radius: var(--radi); min-height: 0; }
.fila-t { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3mm; min-height: 0; }
.t-a { padding-right: 20mm; }
.t-b { padding: 0 10mm; }
.t-c { padding-left: 20mm; }
.trineu { display: grid; place-items: center; padding: 0; min-height: 0; border-radius: 4mm 8mm 3mm 3mm; border-bottom: 3mm solid var(--il-marro); background: var(--il-vermell); }
.trineu .lletra-gran { font-size: 13mm; }
.trineu.on { background: var(--acento); color: var(--paper); }
.gos-neu { border-radius: var(--radi); }


.vestuari { display: grid; grid-template-columns: 38mm minmax(0, 1fr); gap: 5mm; min-height: 0; }
.nen-vest { border-radius: var(--radi); }
.taquilles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 4mm; padding: 4mm; background: var(--il-gris); border: var(--gruix) solid var(--il-contorn); border-radius: var(--radi); min-height: 0; }
.taquilla { display: grid; align-items: end; justify-items: center; padding: 0 0 6mm; min-height: 0; border-radius: 2mm; background: linear-gradient(var(--il-contorn), var(--il-contorn)) 50% 6mm / 60% 2px no-repeat, linear-gradient(var(--il-contorn), var(--il-contorn)) 50% 10mm / 60% 2px no-repeat, linear-gradient(var(--il-contorn), var(--il-contorn)) 50% 14mm / 60% 2px no-repeat, var(--il-blau); }
.taquilla .lletra-gran { font-size: 12mm; background: var(--il-blanc); width: 15mm; text-align: center; border-radius: 2mm; }
.taquilla.on { background: var(--acento); color: var(--paper); }
.taquilla.on .lletra-gran { color: var(--tinta); }


.escriure-8 { display: grid; grid-template-columns: 38mm minmax(0, 1fr); gap: 4mm; min-height: 0; }
.nena-8 { border-radius: var(--radi); }
.vuit-gran { display: grid; grid-template-rows: minmax(0, 1fr) 26mm; gap: 3mm; min-height: 0; }
.punts-8 > svg { width: 100%; height: 100%; min-height: 0; }
.punts-8 { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); padding: 3mm; border: var(--gruix) dashed var(--il-blau); border-radius: var(--radi); min-height: 0; }
.fil-8 { fill: none; stroke: var(--il-contorn); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.1 6.5; }
.dues-8 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4mm; min-height: 0; }
.casella-8 { 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; }

}
}