@layer ficha {

@scope (.cos-ficha) {

:scope { --realce: var(--il-verd-fosc); }
.pg { height: 100%; display: grid; gap: 5mm; }
.pg-facana { grid-template-rows: minmax(0, 1.3fr) minmax(0, 1fr); }
.pg-estany { grid-template-rows: minmax(0, 1.9fr) minmax(0, 1fr); }

.signe-s { font-size: 2em; line-height: 1; }
.forma-s { width: 1.55em; height: 1.55em; fill: none; stroke: var(--tinta); stroke-width: 4; stroke-linejoin: round; }


.edifici { height: 100%; display: grid; grid-template-columns: 59mm minmax(0, 1fr); gap: 5mm; }
.bloc { display: grid; grid-template-rows: 13mm minmax(0, 1fr); min-height: 0; }
.teulada { background: var(--il-marro); clip-path: polygon(0 100%, 8% 0, 92% 0, 100% 100%); }
.pisos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 3.5mm; padding: 4mm; background: var(--il-sorra); border: 3px solid var(--il-marro); border-top: 0; }
.finestra-x { display: grid; place-items: center; width: 100%; height: 100%; padding: 0; background: var(--il-cel); color: var(--tinta); border: 3px solid var(--il-marro); border-radius: 12mm 12mm 2mm 2mm; }
.finestra-x .signe-s { font-size: 2.5em; }
.finestra-x .forma-s { width: 2em; height: 2em; }
button.finestra-x.on { background: var(--il-groc); color: var(--tinta); border: 5px solid var(--acento); }


.parelles { height: 100%; display: grid; grid-template-columns: 44mm minmax(0, 1fr); gap: 5mm; }
.graella-p { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 3mm 5mm; min-height: 0; }
.parella { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5mm; padding: 1.8mm; min-height: 0; background: var(--acento-suau); border: 2px solid var(--realce); border-radius: var(--radi); }
.parella .tria { display: grid; grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "s" "i"; justify-items: center; align-items: center; gap: 1mm; padding: 1.5mm; border: 2px solid var(--il-gris); border-radius: 3mm; background: var(--paper); }
.parella .tria span { grid-area: s; }
.parella .tria input { grid-area: i; width: 1.5em; height: 1.5em; }
.parella .signe-s { font-size: 1.45em; }
.parella .forma-s { width: 1.15em; height: 1.15em; }
.parella .tria input { width: 1.3em; height: 1.3em; }


.estany { height: 100%; aspect-ratio: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 3mm 4mm; padding: 4% 20%; border: 2px solid var(--realce); border-radius: var(--radi); overflow: hidden; }
.pedra { position: relative; z-index: 1; display: grid; place-items: center; align-self: center; justify-self: center; height: 100%; max-height: 26mm; aspect-ratio: 1; padding: 0; background: var(--il-sorra); color: var(--tinta); border: 3px solid var(--il-marro); border-radius: 50%; }
.pedra .signe-s { font-size: 2.2em; }
.pedra .forma-s { width: 1.8em; height: 1.8em; }
button.pedra.on { background: var(--il-herba); color: var(--tinta); border: 5px solid var(--acento); }


.copia { height: 100%; display: grid; grid-template-columns: 48mm minmax(0, 1fr); gap: 5mm; }
.pautes { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 6mm; align-items: end; }
.pauta-g { height: 100%; max-height: 28mm; align-self: end; }

}
}