/* ============================================================
   Generador de Caligrafía — ficha.css
   La HOJA de práctica (ficha) y sus fuentes, valida en pantalla
   e impresión (antes vivía dentro de print.css con media="print",
   por lo que en pantalla la página no tenía ancho y la
   exportación a PDF fallaba). El @media print quedó en print.css.
   ============================================================ */

/* ===================== Fuentes locales ===================== */
/* Andika — fuente escolar de imprenta (SIL Open Font License 1.1) */
@font-face {
  font-family: 'Andika';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Andika-latin-ext-Regular.woff2') format('woff2'),
       url('../fonts/Andika-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Andika';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Andika-Bold.woff2') format('woff2');
}
/* Caveat — cursiva/ligada conectada (SIL Open Font License 1.1) */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Caveat-latin-ext-Regular.woff2') format('woff2'),
       url('../fonts/Caveat-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Caveat-Bold.woff2') format('woff2');
}
/* Shadows Into Light — alternativa cursiva (SIL OFL 1.1) */
@font-face {
  font-family: 'Shadows Into Light';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ShadowsIntoLight-Regular.woff2') format('woff2');
}

/* ===================== Variables de la ficha ===================== */
:root {
  --pagina-ancho-vertical-carta:   21.59cm;
  --pagina-alto-vertical-carta:    27.94cm;
  --pagina-ancho-horizontal-carta: 27.94cm;
  --pagina-alto-horizontal-carta:  21.59cm;

  --pagina-ancho-vertical-a4:   21.0cm;
  --pagina-alto-vertical-a4:    29.7cm;
  --pagina-ancho-horizontal-a4: 29.7cm;
  --pagina-alto-horizontal-a4:  21.0cm;

  --margen-pagina: 1.5cm;
}

/* ===================== Página de ficha ===================== */
.pagina-ficha {
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(21, 24, 35, 0.12);
  margin: 0 auto;
  padding: var(--margen-pagina);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: var(--pagina-ancho-vertical-carta);
  min-height: var(--pagina-alto-vertical-carta);
}
.pagina-ficha.orientacion-horizontal.tamano-carta {
  width: var(--pagina-ancho-horizontal-carta);
  min-height: var(--pagina-alto-horizontal-carta);
}
.pagina-ficha.orientacion-vertical.tamano-carta {
  width: var(--pagina-ancho-vertical-carta);
  min-height: var(--pagina-alto-vertical-carta);
}
.pagina-ficha.orientacion-horizontal.tamano-a4 {
  width: var(--pagina-ancho-horizontal-a4);
  min-height: var(--pagina-alto-horizontal-a4);
}
.pagina-ficha.orientacion-vertical.tamano-a4 {
  width: var(--pagina-ancho-vertical-a4);
  min-height: var(--pagina-alto-vertical-a4);
}

/* Encabezado de la ficha (título + línea para nombre) */
.encabezado-ficha { flex-shrink: 0; margin-bottom: 12px; }
.encabezado-ficha:empty { display: none; }

.titulo-ficha {
  font-family: 'Andika', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #1F2933;
  margin: 0 0 6px;
  text-align: center;
}
.linea-nombre-alumno {
  font-family: 'Andika', sans-serif;
  font-size: 14px;
  color: #1F2933;
  margin: 4px 0 0;
}
.linea-nombre-alumno .rayita-nombre {
  display: inline-block;
  border-bottom: 1px solid #1F2933;
  min-width: 60%;
  margin-left: 6px;
  height: 1em;
  vertical-align: bottom;
}

/* Cuerpo: apila los renglones de pauta */
.cuerpo-ficha {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-lineas-practica, 12px);
}

/* ===================== Líneas de pauta ===================== */
.linea-pauta {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

/* Montessori: doble línea sólida + media punteada */
.pauta-montessori {
  border-top: 2px solid var(--color-guia-practica, #9DB4D1);
  border-bottom: 2px solid var(--color-guia-practica, #9DB4D1);
}
.pauta-montessori::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  border-top: 1px dashed var(--color-guia-practica, #9DB4D1);
  pointer-events: none;
  z-index: 1;
}

/* Simple: una sola línea base */
.pauta-simple {
  border-bottom: 2px solid var(--color-guia-practica, #9DB4D1);
}

/* Cuadrícula: cajas individuales por carácter */
.pauta-cuadricula {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  align-items: stretch;
}
.pauta-cuadricula .cuadro-pauta {
  flex: 1 0 auto;
  border: 1.5px solid var(--color-guia-practica, #9DB4D1);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pauta-cuadricula .cuadro-pauta::before,
.pauta-cuadricula .cuadro-pauta::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, transparent calc(50% - 0.5px), rgba(157,180,209,0.35) calc(50% - 0.5px), rgba(157,180,209,0.35) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom, transparent calc(50% - 0.5px), rgba(157,180,209,0.35) calc(50% - 0.5px), rgba(157,180,209,0.35) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  pointer-events: none;
}

/* Tres líneas (caligrafía inglesa): superior punteada, media y base sólidas */
.pauta-inglesa {
  border-bottom: 2px solid var(--color-guia-practica, #9DB4D1);
  border-top: 1px dashed var(--color-guia-practica, #9DB4D1);
}
.pauta-inglesa::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  border-top: 1px solid var(--color-guia-practica, #9DB4D1);
  pointer-events: none;
  z-index: 1;
  opacity: 0.7;
}

/* ===================== Texto de práctica ===================== */
/* El texto es UNA sola instancia por renglon: un bloque anclado a la
   linea base, sin flex ni overflow (el overflow recortaba el texto
   largo, p. ej. el abecedario). */
.contenedor-texto-linea {
  position: absolute;
  left: 6px;
  right: 6px;
  /* --base-linea lo mide JS (metricas reales de la fuente); +12px de
     desplazamiento calibrado con html2canvas: la linea base del trazo
     queda ~2px sobre el borde del renglon y el pie de la letra lo toca,
     como en una guia de caligrafia real. */
  bottom: calc(var(--base-linea, 0.22em) + 7px);
  z-index: 2;
}
.texto-practica {
  position: relative;
  display: block;
  font-family: 'Andika', sans-serif;
  color: #1F2933;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: pre;
}
.texto-practica.estilo-cursiva {
  font-family: 'Caveat', 'Shadows Into Light', cursive;
}
.texto-practica.modo-punteado {
  color: transparent;
  -webkit-text-stroke: 1px var(--color-trazo-practica, #2C5F8D);
  text-shadow: 0 0 0 var(--color-trazo-practica, #2C5F8D);
}
.texto-practica.modo-punteado.modo-trazado-rayado {
  background-image: repeating-linear-gradient(
    90deg,
    var(--color-trazo-practica, #2C5F8D) 0 3px,
    transparent 3px 5px
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.texto-practica.modelo { opacity: 0.85; }
.espacio-copia {
  display: inline-block;
  position: relative;
  z-index: 2;
}

/* Aviso del renderer cuando una línea larga se dividió */
.aviso-linea-larga {
  font-size: 12px;
  color: #C0392B;
  background: #FDECEA;
  border: 1px solid #F5C6CB;
  border-radius: 4px;
  padding: 4px 8px;
  margin-bottom: 4px;
}

/* ===================== Lienzo de vista previa (pantalla) ===================== */
/* El contenedor escala la hoja con transform; la hoja conserva su
   tamaño natural, por eso el clone de exportación imprime perfecto. */
.lienzo-fichas {
  transform: scale(var(--ajuste-previa, 1));
  transform-origin: var(--origen-previa, top center);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Lienzo fuera de pantalla usado SOLO durante la exportación a PDF:
   hojas a tamaño natural, sin escalas, para que html2canvas rasterice
   con la resolución correcta. (Sin z-index negativo: html2canvas lo
   apilaba tras el fondo del body y pintaba un velo gris.) */
.lienzo-export {
  position: absolute;
  left: -20000px;
  top: 0;
  background: #FFFFFF;
}
/* html2canvas no recorta las sombras: la box-shadow de la hoja se
   pintaba como un velo gris sobre toda la pagina del PDF. */
.lienzo-export .pagina-ficha {
  box-shadow: none !important;
}