@layer ficha {

@scope (.cos-ficha) {
:scope {
  --realce: color-mix(in srgb, var(--il-sorra) 55%, var(--paper));
  --realce-fuerte: var(--il-marro);
}
.ruta-a { height: 100%; display: grid; grid-template-rows: minmax(0, 1.05fr) minmax(0, 1fr); gap: 4mm; }
.ruta-b { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1.2fr) minmax(0, 1fr); gap: 4mm; }
.ruta-a > .ex, .ruta-b > .ex { height: 100%; }


.tira { height: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7mm; position: relative; }
.vineta {
  position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 2mm; padding: 2mm; min-height: 0;
  border: 2px solid var(--realce-fuerte); border-radius: var(--radi); background: var(--paper);
}
.foto-v { display: block; position: relative; min-height: 0; }
.foto-v .img, .foto-v .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pie-v { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2mm; align-items: center; }
.pie-v b { line-height: 1.15; font-size: .95em; }
.ordre {
  width: 11mm; height: 11mm; 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;
}


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


.calendario { display: grid; gap: 3mm; }
.banco-dias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3mm; padding: 2mm; border: 2px dashed var(--realce-fuerte); border-radius: var(--radi); background: var(--realce); }
.banco-dias span { text-align: center; padding: 1mm 2mm; border: 1.5px solid var(--realce-fuerte); border-radius: 999px; background: var(--paper); font-weight: 800; font-size: var(--t-l); }
.calendario { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.banco-dias { grid-column: 1 / -1; }
.dia-frase { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 2mm; padding: 2mm; border: 2px solid var(--realce-fuerte); border-radius: var(--radi); text-align: center; }
.etiqueta-dia { padding: 1mm 2mm; text-align: center; border-radius: 6px; background: var(--realce-fuerte); color: var(--paper); font-weight: 800; font-size: var(--t-s); }
.texto-dia { font-size: var(--t-l); font-weight: 600; line-height: 1.9; align-self: center; }


.granja { height: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3mm; }
.carta-g {
  display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 2mm; padding: 2mm; text-align: center; min-height: 0;
  border: 2px solid var(--realce-fuerte); border-radius: var(--radi); background: var(--paper);
}
.carta-g.on { background: var(--realce); color: inherit; }
.carta-g b { line-height: 1.15; }
.foto-g { display: block; position: relative; min-height: 0; }
.foto-g .img, .foto-g .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }


.mi-relato { height: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3mm; }
.parte-dib { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 2mm; }
.parte-dib p { text-align: center; padding: 1mm; border-radius: 8px; background: var(--realce); border: 2px solid var(--realce-fuerte); font-weight: 800; font-size: var(--t-l); }


.cuaderno-doc { height: 100%; display: grid; grid-template-rows: auto repeat(5, minmax(0, 1fr)); gap: 3mm; }
.cabecera-c { 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); }
.cabecera-c h2 { font-size: var(--t-m); line-height: 1.2; }
.sello-c { padding: .3mm 3mm; border-radius: 999px; background: var(--paper); color: var(--il-contorn); font-weight: 800; font-size: var(--t-s); }
.hoja-r {
  display: grid; grid-template-columns: 13mm minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 4mm; row-gap: 1mm; align-content: center;
  padding: 2mm 4mm; border: 2px solid var(--realce-fuerte); border-radius: var(--radi); min-height: 0;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.5em - 1px), var(--realce) calc(1.5em - 1px), var(--realce) 1.5em);
}
.chapa-r {
  grid-row: 1 / span 2; align-self: center; width: 13mm; height: 13mm; 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;
}
.hoja-r h3 { font-size: var(--t-s); text-transform: uppercase; letter-spacing: .05em; color: var(--realce-fuerte); line-height: 1.5; }
.relato { font-size: 1.04em; line-height: 1.45; font-weight: 600; }
.relato i { font-style: normal; font-weight: 800; border-bottom: 2px solid var(--realce-fuerte); }

}
}