@layer ficha {

@scope (.cos-ficha) {
:scope {
  --realce: color-mix(in srgb, var(--il-vermell) 14%, var(--paper));
  --realce-fuerte: var(--il-vermell);
  --tinta-d: var(--il-contorn);
}
.pliego-1 { height: 100%; display: grid; grid-template-rows: minmax(0, 1.45fr) minmax(0, 1fr); gap: 4mm; }
.pliego-2 { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); gap: 3mm; }
.pliego-1 > .ex, .pliego-2 > .ex { height: 100%; }


.animales { height: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 3mm; }
.animal { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 2mm; padding: 2mm; border: 2px solid var(--realce-fuerte); border-radius: var(--radi); cursor: pointer; min-height: 0; }
.foto-an { display: block; position: relative; min-height: 0; }
.foto-an .img, .foto-an .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.fila-an { display: flex; align-items: center; justify-content: center; gap: 2mm; font-size: var(--t-m); }
.fila-an input, .voz-opcion input {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0; position: relative; width: 6mm; height: 6mm;
  border: 2px solid var(--realce-fuerte); border-radius: 50%; background: var(--paper);
}
.fila-an input:checked::before, .voz-opcion input:checked::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: var(--realce-fuerte); }


.mochila { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 5mm; }
.foto-mo { display: block; position: relative; min-height: 0; border-radius: var(--radi); background: var(--realce); }
.foto-mo .img, .foto-mo .img-ph { position: absolute; inset: 2mm; width: calc(100% - 4mm); height: calc(100% - 4mm); object-fit: contain; }
.rasgos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 3mm; }
.rasgo { font-size: var(--t-l); font-weight: 700; line-height: 1.15; border-width: 2px; border-color: var(--realce-fuerte); border-radius: 14px; }
.rasgo.on { background: var(--realce-fuerte); color: var(--paper); }


.partes-desc { height: 100%; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 14mm; }
.col-dice, .col-parte { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 3mm; }
.dice { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3mm; padding: 1.5mm 3mm; border: 2px solid var(--realce-fuerte); border-radius: var(--radi); font-weight: 700; font-size: var(--t-m); line-height: 1.2; }
.que-es { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 3mm; padding: 1.5mm 4mm; border: 2px dashed var(--realce-fuerte); border-radius: 999px; background: var(--realce); font-size: var(--t-m); line-height: 1.15; }


.comparacion { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 5mm; }
.foto-el { display: block; position: relative; min-height: 52mm; }
.foto-el .img, .foto-el .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.dos-voces { display: grid; grid-template-rows: auto auto; gap: 4mm; align-content: center; }
.voz-opcion {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 1.5mm 3mm; padding: 3mm;
  border: 2px solid var(--realce-fuerte); border-radius: var(--radi); cursor: pointer;
}
.voz-opcion b { align-self: center; font-size: var(--t-m); }
.voz-opcion span { grid-column: 1 / -1; font-size: 1.2em; line-height: 1.25; align-self: center; }


.mi-animal { height: 100%; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 4mm; }
.lado-dibujo { display: grid; min-height: 0; }
.lado-frase { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 2mm; }
.inicio-frase { padding: 1.5mm 3mm; border: 2px solid var(--realce-fuerte); border-radius: 8px; background: var(--realce); font-weight: 800; font-size: var(--t-l); }


.atril { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.05fr) minmax(0, 1.05fr); gap: 2mm; }
.dictado > div:last-child { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); column-gap: 4mm; align-items: center; }
.dictado h3, .dictado .frase-d { grid-column: 1; }
.dictado .nota-d { grid-column: 2; grid-row: 1 / span 2; padding: 1.5mm 2.5mm; border-left: 4px solid var(--realce-fuerte); background: var(--paper); border-radius: 0 8px 8px 0; }
.rotulo-atril { 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); }
.rotulo-atril h2 { font-size: var(--t-m); line-height: 1.2; }
.solo-docente { padding: .3mm 3mm; border-radius: 999px; background: var(--paper); color: var(--tinta-d); font-weight: 800; font-size: var(--t-s); }
.dictado { display: grid; grid-template-columns: 14mm minmax(0, 1fr); gap: 4mm; align-items: center; min-height: 0; padding: 0 0 0 1mm; }
.dictado > div:last-child { display: grid; gap: 1mm; padding: 2mm 4mm; background: var(--realce); border-radius: var(--radi); border: 2px solid var(--realce-fuerte); height: 100%; align-content: center; }
.num-d { width: 14mm; height: 14mm; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--realce-fuerte); font-weight: 800; font-size: var(--t-l); line-height: 1; background: var(--paper); }
.dictado h3 { font-size: var(--t-s); text-transform: uppercase; letter-spacing: .05em; color: var(--realce-fuerte); }
.frase-d { font-size: 1.02em; line-height: 1.28; font-weight: 600; }
.frase-d::first-letter { font-size: 1.2em; }
.frase-d i { font-style: normal; font-weight: 800; border-bottom: 2px solid var(--realce-fuerte); }
.nota-d { font-size: var(--t-s); line-height: 1.2; }

}
}