@layer ficha {

@scope (.cos-ficha) {

:scope { --realce: var(--il-lila); }
.pg { height: 100%; display: grid; gap: 5mm; }
.pg-un { grid-template-rows: minmax(0, 1.5fr) minmax(0, 1fr); }
.pg-dos { grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr); }


.glif { font-size: 1.9em; line-height: 1; }
.forma { width: 1.5em; height: 1.5em; fill: none; stroke: var(--tinta); stroke-width: 4; stroke-linejoin: round; }


.rotol { align-self: center; justify-self: center; font-weight: 800; font-size: var(--t-l); line-height: 1; padding: .22em .9em; border-radius: 999px; border: var(--gruix) solid var(--il-contorn); }
.rot-l { background: var(--il-lila); }
.rot-x { background: var(--il-taronja); }
.rot-f { background: var(--il-herba); }


.classifica { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 4mm; }
.banc-simbols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.4mm; padding: 2mm; border-color: var(--realce); }
.rotol-banc { grid-column: 1 / -1; font-weight: 800; font-size: var(--t-s); line-height: 1.2; padding-left: 1mm; }
.peca-arr { padding: 0; aspect-ratio: 1; min-height: 0; width: 100%; border-radius: 3mm; border-color: var(--realce); }
.peca-arr .glif { font-size: 1.55em; }
.peca-arr .forma { width: 1.25em; height: 1.25em; }
.caixes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4mm; min-height: 0; }
.caixa-grup { display: grid; grid-template-rows: auto minmax(0, 1fr) 33mm; gap: 2mm; min-height: 0; }
.zona-g { align-content: center; gap: 1.5mm; border-width: 2px; }
.zona-g .arrossega { width: 11mm; height: 11mm; min-height: 0; padding: 0; border-radius: 2.5mm; }
.zona-g .glif { font-size: 1.3em; }
.zona-g .forma { width: 1.05em; height: 1.05em; }


.estacio { height: 100%; display: grid; grid-template-columns: 50mm minmax(0, 1fr); gap: 4mm; align-items: stretch; }
.estacio-dr { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 3mm; min-height: 0; }
.cinta-fab { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.2mm; align-items: center; padding: 2mm; background: var(--il-gris); border-top: 3mm solid var(--il-contorn); border-bottom: 3mm solid var(--il-contorn); border-radius: 2mm; }
.peca-cinta { display: grid; place-items: center; aspect-ratio: 1; background: var(--paper); border: var(--gruix) solid var(--il-contorn); border-radius: 2mm; }
.peca-cinta .glif { font-size: 1.45em; }
.peca-cinta .forma { width: 1.2em; height: 1.2em; }
.recomptes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4mm; align-content: center; }
.recompte { display: grid; justify-items: center; gap: 2.5mm; }
.recompte .r { width: 100%; max-width: 21mm; height: 1.8em; }


.tires { height: 100%; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 3mm; }
.tira { display: grid; grid-template-columns: 27mm minmax(0, 1fr); gap: 4mm; align-items: stretch; min-height: 0; }
.model-caixa { position: relative; display: grid; place-items: center; background: var(--il-cel); border: 3px solid var(--realce); border-radius: var(--radi); }
.model-caixa .glif { font-size: 2.6em; }
.model-caixa .forma { width: 2.3em; height: 2.3em; }
.rotol-model { position: absolute; left: 50%; top: 1.4mm; transform: translateX(-50%); font-size: var(--t-xs); font-weight: 800; line-height: 1; }
.opcions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3mm; align-items: stretch; min-height: 0; }
.peca { display: grid; place-items: center; height: 100%; width: 100%; padding: 0; background: var(--paper); border: 2px solid var(--il-gris); border-radius: 3mm; color: var(--tinta); }
.peca .glif { font-size: 2.1em; }
.peca .forma { width: 1.7em; height: 1.7em; }
button.peca.on { background: var(--acento-suau); color: var(--tinta); border: 4px solid var(--acento); border-radius: 50%; }


.propies { height: 100%; display: grid; grid-template-columns: 52mm repeat(3, minmax(0, 1fr)); gap: 4mm; }
.propies .espai-obert { min-height: 0; border-color: var(--realce); }

}
}