@layer ficha {

@scope (.cos-ficha) {
:scope {
  --realce: color-mix(in srgb, var(--il-lila) 18%, var(--paper));
  --realce-fuerte: var(--il-lila);
  --trazo-p: var(--il-contorn);
}
.hoja-poema-1 { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 2.1fr); gap: 4mm; }
.hoja-poema-2 { height: 100%; display: grid; grid-template-rows: minmax(0, 1.25fr) minmax(0, 1.05fr) minmax(0, .9fr); gap: 3mm; }
.hoja-poema-1 > .ex, .hoja-poema-2 > .ex { height: 100%; }


.palmas { height: 100%; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 2.5mm; }
.linea-palmas { display: grid; grid-template-columns: 42mm minmax(0, 1fr); align-items: center; gap: 4mm; padding: 1.5mm 3mm; border: 2px solid var(--trazo-p); border-radius: var(--radi); min-height: 0; }
.verso-chico { font-weight: 800; font-size: var(--t-l); line-height: 1.1; }
.circulos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3mm; justify-items: center; }
.palma { width: 11mm; height: 11mm; padding: 0; border-radius: 50%; border: 2px solid var(--trazo-p); background: var(--paper); }
.palma.on { background: var(--realce-fuerte); }


.versos-orden { height: 100%; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 3mm; }
.verso-hueco .r { height: 1.5em; }
.tira-verso { display: grid; grid-template-columns: 52mm 14mm minmax(0, 1fr); align-items: center; gap: 4mm; padding: 2mm; border: 2px solid var(--trazo-p); border-radius: var(--radi); min-height: 0; }
.foto-ver { display: block; align-self: stretch; position: relative; min-height: 0; }
.foto-ver .img, .foto-ver .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.tira-verso b { font-size: var(--t-xl); line-height: 1.2; }
.ordre { width: 13mm; height: 13mm; display: grid; place-items: center; border: 2px solid var(--trazo-p); border-radius: 50%; background: var(--realce); font-weight: 800; font-size: var(--t-l); line-height: 1; }


.tarjeta-poema { height: 100%; display: grid; grid-template-rows: auto repeat(4, minmax(0, 1fr)); gap: 2mm; }
.cuadro-palabras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3mm; padding: 2mm; border: 2px dashed var(--trazo-p); border-radius: var(--radi); background: var(--realce); }
.cuadro-palabras span { text-align: center; padding: 1mm 2mm; border: 1.5px solid var(--trazo-p); border-radius: 999px; background: var(--paper); font-weight: 800; font-size: var(--t-l); }
.verso-hueco { display: flex; align-items: center; justify-content: center; gap: .3em; font-size: var(--t-l); font-weight: 600; line-height: 1; text-align: center; border-bottom: 2px dotted var(--realce-fuerte); }


.manera { height: 100%; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 14mm; }
.col-verso, .col-manera { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 3mm; }
.verso-caja { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3mm; padding: 1.5mm 3mm; border: 2px solid var(--trazo-p); border-radius: var(--radi); font-weight: 700; font-size: var(--t-l); line-height: 1.15; }
.manera-caja { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 3mm; padding: 1.5mm 4mm; border: 2px dashed var(--trazo-p); border-radius: 999px; background: var(--realce); font-size: var(--t-m); line-height: 1.15; }


.mi-verso { height: 100%; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 4mm; }
.dibujo-verso, .escribe-verso { display: grid; min-height: 0; }


.atril-poema { height: 100%; display: grid; grid-template-rows: auto minmax(0, 2fr) minmax(0, 1.2fr); gap: 3mm; }
.cinta-doc { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4mm; padding: 3mm 4mm; border-radius: var(--radi); background: var(--realce-fuerte); color: var(--paper); }
.cinta-doc h2 { font-size: var(--t-m); line-height: 1.2; }
.sello-doc { padding: .3mm 3mm; border-radius: 999px; background: var(--paper); color: var(--trazo-p); font-weight: 800; font-size: var(--t-s); }
.poema-grande { display: grid; grid-template-rows: auto repeat(4, minmax(0, 1fr)); gap: 2mm; padding: 3mm 5mm; border: 3px double var(--trazo-p); border-radius: var(--radi); background: var(--realce); }
.rotulo-poema { font-size: var(--t-s); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--trazo-p); }
.rotulo-poema small { text-transform: none; letter-spacing: 0; font-weight: 600; }
.verso-g { display: flex; align-items: center; justify-content: center; gap: 8mm; font-size: var(--t-xl); font-weight: 800; line-height: 1.1; text-align: center; border-bottom: 1.5px dotted var(--realce-fuerte); }
.verso-g span { white-space: nowrap; }
.trio-docente { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3mm; }
.ficha-doc { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 2mm; padding: 3mm; border: 2px solid var(--trazo-p); border-radius: var(--radi); font-size: var(--t-m); line-height: 1.3; }
.etq { padding: .4mm 3mm; border-radius: 999px; background: var(--realce-fuerte); color: var(--paper); font-size: var(--t-s); justify-self: start; }
.ficha-doc i { font-style: normal; font-weight: 800; border-bottom: 2px solid var(--realce-fuerte); }

}
}
