@layer ficha {

@scope (.cos-ficha) {

:scope { --realce: var(--il-blau-fosc); }
.pg { height: 100%; display: grid; gap: 5mm; }
.pg-cel { grid-template-rows: minmax(0, 2.15fr) minmax(0, 1fr); }
.pg-tren { grid-template-rows: minmax(0, 2.1fr) minmax(0, 1fr); }

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


.cel { position: relative; height: 100%; aspect-ratio: auto; container-type: size; border: 2px solid var(--realce); border-radius: var(--radi); overflow: hidden; }
.globus { position: absolute; left: var(--x); top: var(--y); width: calc(var(--s) * 13.5cqw); aspect-ratio: 5 / 6.7; padding: 0; background: none; border: 0; border-radius: 0; color: var(--tinta); transform: rotate(var(--gir)); transform-origin: 50% 90%; }
.cos-globus { position: absolute; left: 0; right: 0; top: 0; height: 89.5%; display: grid; place-items: center; border: 2px solid var(--il-contorn); border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%; }
.globus::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 12%; border-left: 2px solid var(--il-contorn); transform: translateX(-50%); }
.globus::after { content: ""; position: absolute; inset: -2.2cqw -2.2cqw 6% -2.2cqw; border: 1cqw solid var(--acento); border-radius: 50%; opacity: 0; }
button.globus.on { background: none; color: var(--tinta); }
.globus.on::after { opacity: 1; }
.c-rosa .cos-globus { background: var(--il-rosa); }
.c-blau .cos-globus { background: var(--il-blau); }
.c-groc .cos-globus { background: var(--il-groc); }
.c-verd .cos-globus { background: var(--il-herba); }
.c-taronja .cos-globus { background: var(--il-taronja); }
.c-lila .cos-globus { background: var(--il-lila); }
.globus .signe { font-size: 2.35em; }
.globus .trac { width: 1.9em; height: 1.9em; }


.comptes { height: 100%; display: grid; grid-template-columns: 38mm repeat(2, minmax(0, 1fr)); gap: 5mm; }
.compte { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 3mm; justify-items: stretch; }
.eti-compte { font-weight: 800; font-size: var(--t-l); line-height: 1.1; text-align: center; }
.compte .fit { min-height: 0; padding: 0 6mm; }
.compte .r { font-size: var(--t-xxl); }


.tren { height: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto repeat(3, minmax(0, 1fr)); gap: 4mm 5mm; }
.banda { grid-column: 1 / -1; aspect-ratio: 7 / 1; }
.vago { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3mm; align-items: stretch; padding: 3mm 3mm 6mm; background: var(--acento-suau); border: 3px solid var(--realce); border-radius: var(--radi); }
.vago::before, .vago::after { content: ""; position: absolute; bottom: -3.2mm; width: 6mm; height: 6mm; border: 2px solid var(--il-contorn); border-radius: 50%; background: var(--il-gris); }
.vago::before { left: 14%; }
.vago::after { right: 14%; }
.finestra { display: grid; place-items: center; width: 100%; height: 100%; padding: 0; background: var(--paper); border: 2px solid var(--il-gris); border-radius: 3mm; color: var(--tinta); }
.finestra .signe { font-size: 2.3em; }
.finestra .trac { width: 1.8em; height: 1.8em; }
button.finestra.on { background: var(--paper); color: var(--tinta); border: 4px solid var(--acento); border-radius: 50%; }


.taller { height: 100%; display: grid; grid-template-columns: 36mm minmax(0, 1fr); gap: 5mm; }
.taller .espai-obert { min-height: 0; border-color: var(--realce); }

}
}