@layer ficha {

@scope (.cos-ficha) {
:scope { --realce: var(--il-lila); }
.pg { height: 100%; display: grid; gap: 4mm; }
.pg-cine { grid-template-rows: minmax(0, 118fr) minmax(0, 88fr); }
.pg-sala { grid-template-rows: minmax(0, 128fr) minmax(0, 118fr); }
.pg .ex-cos { display: grid; grid-template-columns: minmax(0, 1fr); }


.taquilla { display: grid; grid-template-columns: 42mm minmax(0, 1fr); gap: 4mm; min-height: 0; }
.esq-t { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 3mm; min-height: 0; }
.tarja-model { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1mm; background: var(--realce); border: var(--gruix) solid var(--il-contorn); border-radius: var(--radi); }
.tarja-model .lletra-gran { font-size: 19mm; }
.os-c { border-radius: var(--radi); }
.entrades { display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 2.5mm; min-height: 0; }
.entrada { display: flex; align-items: center; justify-content: center; gap: 26mm; padding: 0 12mm; min-height: 0; border: 0; border-radius: 3mm; color: var(--tinta);
  background: radial-gradient(circle at 0 50%, var(--paper) 0 3mm, transparent 3.2mm), radial-gradient(circle at 100% 50%, var(--paper) 0 3mm, transparent 3.2mm), linear-gradient(var(--il-groc), var(--il-groc)); }
.entrada .lletra-gran { font-size: 12mm; }
.estrella { font-size: 8mm; line-height: 1; }
.entrada.on { background: var(--acento); color: var(--paper); }


.butaques { display: grid; grid-template-columns: minmax(0, 1fr) 26mm minmax(0, 1fr) 40mm; gap: 0 4mm; min-height: 0; }
.col-entrades, .col-seients { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 3mm; min-height: 0; }
.col-entrades { grid-column: 1; }
.col-seients { grid-column: 3; }
.mussol-c { grid-column: 4; border-radius: var(--radi); }
.fila-u { display: flex; align-items: center; gap: 4mm; min-height: 0; }
.col-entrades .fila-u { justify-content: space-between; }
.mini-entrada, .seient-u { flex: 1; display: grid; place-items: center; height: 100%; font-size: 11mm; border: var(--gruix) solid var(--il-contorn); }
.mini-entrada { background: var(--il-groc); border-radius: 3mm; }
.seient-u { background: var(--il-vermell); border-radius: 5mm 5mm 1mm 1mm; }


.laberint-ex { display: grid; grid-template-columns: minmax(0, 1fr) 46mm; gap: 5mm; min-height: 0; }
.laberint-col { display: grid; grid-template-rows: minmax(0, 1fr); min-height: 0; }
.cel-l { position: relative; }
.ini-l, .fi-l { position: absolute; left: 2mm; top: 1mm; font-size: 6mm; line-height: 1; }
.laberint { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 2.5mm; padding: 3mm; background: var(--il-herba); border: var(--gruix) solid var(--il-contorn); border-radius: var(--radi); min-height: 0; }
.cel-l { display: grid; place-items: center; padding: 0; min-height: 0; border-radius: 3mm; background: var(--il-blanc); }
.cel-l .lletra-gran { font-size: 13mm; }
.cel-l.on { background: var(--acento); color: var(--paper); }
.llum-c { border-radius: var(--radi); }


.escriure-d { display: grid; grid-template-columns: 38mm minmax(0, 1fr); gap: 4mm; min-height: 0; }
.nen-d { border-radius: var(--radi); }
.dos-gran { display: grid; grid-template-rows: minmax(0, 1fr) 26mm; gap: 3mm; min-height: 0; }
.punts-d > svg { width: 100%; height: 100%; min-height: 0; }
.punts-d { 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-d { fill: none; stroke: var(--il-contorn); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.1 6.5; }
.dues-d { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4mm; min-height: 0; }
.casella-d { 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; }

}
}
