@layer ficha {

@scope (.cos-ficha) {
:scope {
  --realce: color-mix(in srgb, var(--il-taronja) 28%, var(--paper));
  --realce-fuerte: var(--il-taronja);
  --trazo: var(--il-contorn);
}
.plano-a { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 2.6fr); gap: 4mm; }
.plano-b { height: 100%; display: grid; grid-template-rows: minmax(0, 1.1fr) minmax(0, 1.7fr) minmax(0, .9fr); gap: 4mm; }
.plano-a > .ex, .plano-b > .ex { height: 100%; }


.figuras { height: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3mm; }
.figura { padding: 1.5mm; border-radius: var(--radi); border: 2px solid var(--trazo); background: var(--paper); min-height: 0; }
.figura svg { width: 100%; height: 100%; }
.figura .rellena { fill: var(--paper); }
.figura-pinta.on .rellena { fill: var(--il-taronja); }
.figura.on { background: var(--realce); color: inherit; }


.pasos-hoja { height: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 3mm; }
.paso-fila {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; gap: 2mm 3mm; padding: 2mm;
  border: 2px solid var(--trazo); border-radius: var(--radi); min-height: 0;
}
.vista-paso { grid-column: 1 / -1; display: block; position: relative; min-height: 0; }
.vista-paso .img, .vista-paso .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.paso-fila b { align-self: center; line-height: 1.15; font-size: var(--t-l); }
.paso-fila .ordre { order: 2; }
.ordre {
  width: 12mm; height: 12mm; display: grid; place-items: center; border: 2px solid var(--trazo); border-radius: 50%;
  background: var(--realce); font-weight: 800; font-size: var(--t-l); line-height: 1;
}


.tres-casas { height: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4mm; }
.caja-casa {
  display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: 2mm; padding: 3mm;
  border: 2px solid var(--trazo); border-radius: var(--radi); cursor: pointer; min-height: 0;
}
.dibujo-casa { width: 100%; height: 100%; min-height: 0; }
.caja-casa input {
  appearance: none; -webkit-appearance: none; margin: 0; position: relative; width: 8mm; height: 8mm;
  border: 2px solid var(--trazo); border-radius: 50%; background: var(--paper);
}
.caja-casa input:checked::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: var(--trazo); }


.lugares { height: 100%; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 16mm; }
.col-lugar, .col-palabra { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 3mm; }
.lugar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3mm; padding: 1.5mm 3mm;
  border: 2px solid var(--trazo); border-radius: var(--radi); min-height: 0;
}
.lugar { position: relative; }
.escena-pelota { position: absolute; left: 3mm; top: 1.5mm; width: calc(100% - 17mm); height: calc(100% - 3mm); }
.lugar .punt { grid-column: 2; justify-self: end; }
.palabra-lugar {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 3mm; padding: 1.5mm 4mm;
  border: 2px dashed var(--trazo); border-radius: 999px; background: var(--realce); font-size: var(--t-xl);
}


.linea-guion { height: 100%; display: grid; grid-template-rows: auto minmax(0, .85fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 2mm; position: relative; }
.aviso-linea { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.5mm 4mm; padding: 3mm 4mm; border-radius: var(--radi); background: var(--realce); border: 2px dashed var(--trazo); }
.aviso-linea h2 { font-size: var(--t-m); line-height: 1.2; }
.sello-linea { justify-self: start; padding: .3mm 3mm; border-radius: 999px; background: var(--trazo); color: var(--paper); font-weight: 800; font-size: var(--t-s); }
.paso-doc { display: grid; grid-template-columns: 13mm minmax(0, 1fr); gap: 4mm; align-items: center; min-height: 0; }
.bola {
  width: 13mm; height: 13mm; display: grid; place-items: center; border-radius: 50%; background: var(--realce-fuerte);
  border: 2px solid var(--trazo); font-weight: 800; font-size: var(--t-l); line-height: 1;
}
.cuerpo-doc { display: grid; gap: 1mm; padding: 2mm 3mm; border-left: 5px solid var(--realce-fuerte); background: var(--realce); border-radius: 0 var(--radi) var(--radi) 0; align-content: center; height: 100%; }
.cuerpo-doc h3 { font-size: var(--t-s); text-transform: uppercase; letter-spacing: .05em; }
.oral { font-size: 1.1em; line-height: 1.25; font-weight: 600; }
.oral i { font-style: normal; font-weight: 800; border-bottom: 2px solid var(--trazo); }
.ayuda-doc { font-size: var(--t-s); line-height: 1.2; }
.paso-doc:nth-of-type(1) .oral { font-size: 1.4em; }
.paso-doc:nth-of-type(3) .oral { font-size: 1.2em; }

}
}