@layer ficha {

@scope (.cos-ficha) {
:scope { --realce: var(--il-rosa); }
.pg { height: 100%; display: grid; gap: 4mm; }
.pg-festa { grid-template-rows: minmax(0, 70fr) minmax(0, 136fr); }
.pg-ram { grid-template-rows: minmax(0, 128fr) minmax(0, 118fr); }
.pg .ex-cos { display: grid; grid-template-columns: minmax(0, 1fr); }


.globus-fila { display: grid; grid-template-columns: 30mm 34mm repeat(5, minmax(0, 1fr)); gap: 2.5mm; min-height: 0; }
.pallasso-g { border-radius: var(--radi); }
.globus-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; min-height: 0; }
.globus-model svg { flex: 1; width: 100%; min-height: 0; }
.globus-b, .globus-r { padding: 0; border: 0; background: transparent; border-radius: var(--radi); min-height: 0; }
.globus-in { display: block; width: 100%; height: 100%; }
.globus-svg { width: 100%; height: 100%; }
.cos-globus { fill: var(--il-vermell); stroke: var(--il-contorn); stroke-width: 3; }
.nus-globus { fill: var(--il-vermell); stroke: var(--il-contorn); stroke-width: 2; stroke-linejoin: round; }
.fil-globus { fill: none; stroke: var(--il-contorn); stroke-width: 2; stroke-linecap: round; }
.globus-svg text { fill: var(--il-blanc); stroke: var(--il-contorn); stroke-width: 1.4; paint-order: stroke; }
.globus-b.on, .globus-r.on { outline: 3px solid var(--acento); outline-offset: -3px; }
.globus-b.on .cos-globus, .globus-r.on .cos-globus { fill: var(--il-groc); }


.parelles-ex { display: grid; grid-template-columns: minmax(0, 1fr) 40mm; gap: 5mm; min-height: 0; }
.parelles { display: grid; grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 3mm; min-height: 0; }
.parella { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 3mm; padding: 1.5mm 3mm; background: var(--il-sorra); border-radius: var(--radi); min-height: 0; }
.p-a, .p-b { display: grid; place-items: center; font-size: 12mm; background: var(--il-blanc); border: var(--gruix) solid var(--il-contorn); border-radius: 3mm; }
.p-a { background: var(--realce); }
.gir180 { rotate: 180deg; }
.parella .tria { justify-content: center; gap: 2mm; background: var(--paper); border: var(--gruix) solid var(--il-contorn); border-radius: 3mm; min-height: 0; }
.parella .tria span { display: grid; place-items: center; font-size: 9mm; font-weight: 800; line-height: 1; }
.gat-f { border-radius: var(--radi); }


.ram-ex { display: grid; grid-template-columns: 40mm minmax(0, 1fr); gap: 5mm; min-height: 0; }
.ocell-g { border-radius: var(--radi); }
.ram { display: grid; grid-template-rows: repeat(3, 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; }
.fila-ram { display: flex; justify-content: center; gap: 6mm; min-height: 0; }
.globus-r { width: 25mm; height: 100%; }


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

}
}