@layer ficha {

@scope (.cos-ficha) {
:scope {
  --realce: color-mix(in srgb, var(--il-verd) 20%, var(--paper));
  --realce-fuerte: var(--il-verd);
  --trazo-v: var(--il-contorn);
}
.tramo-1 { height: 100%; display: grid; grid-template-rows: minmax(0, 1.9fr) minmax(0, 1fr); gap: 4mm; }
.tramo-2 { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1.6fr) minmax(0, .8fr); gap: 4mm; }
.tramo-1 > .ex, .tramo-2 > .ex { height: 100%; }


.lugar-voz { height: 100%; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 14mm; }
.columna-lugares, .columna-voces { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 3mm; }
.lugar-card { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 3mm; padding: 2mm; border: 2px solid var(--trazo-v); border-radius: var(--radi); min-height: 0; }
.lugar-card b { font-size: var(--t-m); max-width: 24mm; line-height: 1.15; }
.foto-lg { display: block; align-self: stretch; position: relative; min-height: 0; }
.foto-lg .img, .foto-lg .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.voz-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 3mm; padding: 2mm 3mm; border: 2px dashed var(--trazo-v); border-radius: var(--radi); background: var(--realce); min-height: 0; }
.voz-card b { font-size: var(--t-m); line-height: 1.1; }
.icono-voz { width: 16mm; height: 11mm; }


.frases-tono { height: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3mm; }
.frase-tono { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: 2mm; padding: 3mm; border: 2px solid var(--trazo-v); border-radius: var(--radi); text-align: center; }
.texto-tono { align-self: center; font-size: var(--t-xl); font-weight: 800; line-height: 1.15; }


.parejas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4mm; }
.pareja { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5mm; padding: 2.5mm; border: 2px dashed var(--trazo-v); border-radius: var(--radi); background: var(--realce); }
.palabra-p { min-height: 17mm; font-size: var(--t-xl); font-weight: 800; border-width: 2px; border-color: var(--trazo-v); border-radius: 14px; line-height: 1.1; }
.palabra-p.on { background: var(--realce-fuerte); color: var(--trazo-v); }


.dos-voces-caso { height: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4mm; }
.caso-voz { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 2mm; padding: 2.5mm; border: 2px solid var(--trazo-v); border-radius: var(--radi); min-height: 0; }
.caso-sin-foto { grid-template-rows: minmax(0, 1fr) auto; }
.foto-cv { display: block; position: relative; min-height: 0; }
.foto-cv .img, .foto-cv .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.situacion { align-self: center; font-size: var(--t-l); font-weight: 700; line-height: 1.25; text-align: center; padding: 3mm; border-radius: 10px; background: var(--realce); }
.opciones-voz { display: grid; gap: 2mm; }
.opciones-voz .tria { padding: 1.5mm 2.5mm; border: 1.5px solid var(--linia); border-radius: 8px; font-weight: 600; line-height: 1.2; }


.partitura { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2.5mm; }
.cabecera-p { 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); }
.cabecera-p h2 { font-size: var(--t-m); line-height: 1.2; }
.sello-p { padding: .3mm 3mm; border-radius: 999px; background: var(--paper); font-weight: 800; font-size: var(--t-s); }
.nota-lectura { display: grid; grid-template-columns: 14mm minmax(0, 1fr); gap: 3mm; align-items: stretch; min-height: 0; }
.clave { display: grid; place-items: center; border-radius: var(--radi); background: var(--trazo-v); color: var(--paper); font-weight: 800; font-size: var(--t-xl); }
.bloque { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); column-gap: 3mm; row-gap: 1mm; padding: 2mm 3mm; border: 2px solid var(--trazo-v); border-radius: var(--radi); background: var(--realce); align-content: center; }
.bloque h3 { grid-column: 1; font-size: var(--t-s); text-transform: uppercase; letter-spacing: .05em; align-self: center; }
.modo { grid-column: 2; grid-row: 1; align-self: center; }
.modo span { display: inline-block; padding: .4mm 3mm; border-radius: 999px; background: var(--paper); border: 1.5px solid var(--trazo-v); font-weight: 800; font-size: var(--t-s); }
.texto-lec { grid-column: 1 / -1; font-size: 1.08em; line-height: 1.28; font-weight: 600; }
.texto-lec i { font-style: normal; font-weight: 800; border-bottom: 2px solid var(--trazo-v); }

}
}