@layer ficha {

@scope (.cos-ficha) {
:scope {
  --realce: color-mix(in srgb, var(--il-rosa) 30%, var(--paper));
  --realce-fuerte: var(--il-lila);
  --tinta-fuerte: var(--il-contorn);
}
.mesa-uno { height: 100%; display: grid; grid-template-rows: minmax(0, 2.5fr) minmax(0, 1fr); gap: 4mm; }
.mesa-dos { height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 4mm; }
.mesa-uno > .ex, .mesa-dos > .ex { height: 100%; }


.une-pedir { height: 100%; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 14mm; }
.col-escenas, .col-frases { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 3mm; }
.escena-p {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 3mm; padding: 2mm;
  border: 2px solid var(--realce-fuerte); border-radius: var(--radi); background: var(--paper); min-height: 0;
}
.vista-p { display: block; align-self: stretch; min-height: 0; position: relative; overflow: hidden; }
.vista-p .img, .vista-p .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.escena-p b { font-size: var(--t-l); writing-mode: horizontal-tb; }
.frase-p {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 3mm; padding: 2mm 3mm;
  border: 2px dashed var(--realce-fuerte); border-radius: 999px; background: var(--realce); font-weight: 800; font-size: var(--t-m); line-height: 1.2;
}


.palabras-orden { height: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 3mm; }
.tarjeta-pal {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 3mm; padding: 2mm 3mm;
  border: 2px solid var(--realce-fuerte); border-radius: 12px; font-size: var(--t-xl); text-align: center;
}
.ordre {
  width: 12mm; height: 12mm; display: grid; place-items: center; border: 2px solid var(--realce-fuerte); border-radius: 8px;
  background: var(--realce); font-weight: 800; font-size: var(--t-l); line-height: 1;
}


.casos-amables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4mm; }
.caso-a { display: grid; gap: 2.5mm; padding: 3mm; border: 2px solid var(--realce-fuerte); border-radius: var(--radi); align-content: start; }
.rotulo { display: flex; align-items: center; gap: 2mm; font-weight: 800; line-height: 1.2; }
.chapa {
  flex: none; width: 1.7em; height: 1.7em; display: grid; place-items: center; line-height: 1; border-radius: 50%;
  background: var(--realce-fuerte); color: var(--paper); font-weight: 800;
}
.opciones-a { display: grid; gap: 2mm; }
.opciones-a .tria { padding: 2mm 2.5mm; border: 1.5px solid var(--linia); border-radius: 8px; font-weight: 600; line-height: 1.2; min-height: 11mm; }


.gustos { display: grid; gap: 3mm; }
.fila-gusto {
  display: grid; grid-template-columns: 24mm 28mm minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 3mm; padding: 2mm 3mm;
  border-bottom: 2px dashed var(--realce-fuerte);
}
.fila-gusto b { font-size: var(--t-l); }
.vista-g { display: block; width: 22mm; height: 22mm; }
.vista-g .img, .vista-g .img-ph { width: 100%; height: 100%; object-fit: contain; }
.boton-g { min-height: 14mm; font-weight: 800; font-size: var(--t-l); border-width: 2px; border-color: var(--realce-fuerte); }
.boton-g.on { background: var(--realce-fuerte); color: var(--paper); }


.mi-gusto { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4mm; }
.parte-escribe { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 2mm; }
.parte-escribe p { font-size: var(--t-l); font-weight: 800; padding: 2mm 3mm; border-radius: 10px; background: var(--realce); border: 2px solid var(--realce-fuerte); }
.parte-dibuja { min-height: 0; display: grid; }


.guion { height: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, .9fr); gap: 4mm; }
.l3 .dicho { font-size: 1.25em; }
.cabecera-guion {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 4mm; padding: 3mm 4mm; border-radius: var(--radi);
  background: var(--realce-fuerte); color: var(--paper);
}
.cabecera-guion h2 { font-size: var(--t-l); line-height: 1.1; }
.sello-guion { padding: .3mm 3mm; border-radius: 999px; background: var(--paper); color: var(--tinta-fuerte); font-weight: 800; font-size: var(--t-s); }
.lectura {
  display: grid; grid-template-columns: 12mm minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 3mm; row-gap: 2mm;
  padding: 3mm; border: 2px solid var(--realce-fuerte); border-radius: var(--radi); min-height: 0;
}
.l5 { grid-column: 1 / -1; }
.num-l {
  grid-row: 1 / span 2; width: 12mm; height: 12mm; display: grid; place-items: center; border-radius: 50%;
  background: var(--realce); border: 2px solid var(--realce-fuerte); font-weight: 800; font-size: var(--t-l); line-height: 1;
}
.lectura h3 { font-size: var(--t-m); text-transform: uppercase; letter-spacing: .04em; align-self: center; }
.dicho { grid-column: 2; align-self: center; font-size: 1.15em; line-height: 1.3; font-weight: 600; }
.l4 .dicho { font-size: 1.3em; }
.dicho i { font-style: normal; font-weight: 800; border-bottom: 2px solid var(--realce-fuerte); }
.apoyo { grid-column: 1 / -1; padding: 1mm 2.5mm; font-size: var(--t-s); line-height: 1.2; border-left: 4px solid var(--realce-fuerte); background: var(--realce); border-radius: 0 8px 8px 0; }

}
}