/* La hoja oficial del plantel (#046).

   Esto no es una pantalla que ademas se pueda imprimir: es un papel que
   ademas se puede mirar. Las medidas van en milimetros y no en pixeles porque
   el destino es una hoja carta, y lo que importa es que caiga donde cae en el
   formato impreso.

   Una hoja por alumno. El formato tiene una sola linea de nombre y firmas del
   alumno y del padre, asi que un lote de cinco son cinco paginas y cada una se
   corta con `break-after`. */

.papel {
  --tinta-papel: #000;
  background: #fff;
  color: var(--tinta-papel);
  width: 216mm;               /* carta */
  min-height: 279mm;
  padding: 14mm 16mm 10mm;
  margin: 0 auto 18px;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10.5pt;
  line-height: 1.5;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .18);
  display: flex; flex-direction: column;
}

/* --- Membrete -------------------------------------------------------------- */

.papel .membrete {
  display: flex; align-items: center; gap: 4mm;
  border-bottom: 1px solid var(--tinta-papel);
  padding-bottom: 3mm;
}
/* Cada logotipo manda su alto y guarda su proporcion: si se estira, deja de ser
   el logotipo oficial. Van a los dos extremos del membrete y el texto de la
   dependencia queda en medio, que es como esta el papel. */
.papel .membrete .logo-sep { flex: 0 0 auto; height: 12mm; width: auto; }
.papel .membrete .logo-gobierno { flex: 0 0 auto; height: 20mm; width: auto; }
.papel .membrete .dependencia {
  flex: 1; min-width: 0;
  /* 7 pt y no mas: entre los dos logotipos quedan 90 mm, y el renglon largo
     --«Direccion General de Educacion Tecnologica Industrial y de Servicios»--
     tiene que caber de una pieza. Partido en dos deja de leerse como el
     membrete y se lee como un parrafo. */
  text-align: right; font-size: 7pt; line-height: 1.35;
}
.papel .membrete .dependencia b { font-weight: 700; }

.papel .titulo {
  text-align: center;
  font-weight: 700; font-size: 12pt; letter-spacing: .5px;
  margin: 3mm 0 2mm;
}
.papel .lugar-fecha { text-align: right; margin-bottom: 3mm; }

/* --- Los campos ------------------------------------------------------------ */

/* Cada dato va sobre una linea, como en el papel: lo escrito encima y la raya
   debajo. Asi la hoja llena y la vacia son la misma hoja. */
.papel .renglon { display: flex; gap: 4mm; align-items: baseline; margin-bottom: 3mm; }
.papel .campo-papel { display: flex; gap: 2mm; align-items: baseline; min-width: 0; }
/* El reparto horizontal es cosa del renglon. Suelto --como el rotulo del
   motivo-- el campo es hijo directo del papel, que es una columna flex, y un
   `flex: 1` ahi lo estira hacia abajo y se traga el espacio sobrante. */
.papel .renglon > .campo-papel { flex: 1; }
.papel .campo-papel > .etiqueta { font-weight: 700; white-space: nowrap; }
.papel .campo-papel > .valor {
  flex: 1; min-width: 0;
  border-bottom: 1px solid var(--tinta-papel);
  padding: 0 1mm;
  min-height: 5mm;
  word-break: break-word;
}
.papel .renglon > .campo-papel.corto { flex: 0 0 auto; }

/* Un rotulo que encabeza un bloque, no un dato sobre una raya. */
.papel .etiqueta-bloque { font-weight: 700; margin-bottom: 1mm; }
.papel .campo-papel.corto > .valor { flex: 0 0 26mm; }

/* --- Motivos --------------------------------------------------------------- */

.papel .motivos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1mm 8mm;
  margin: 1mm 0 3mm;
}
.papel .motivos .motivo-papel { display: flex; gap: 2mm; align-items: baseline; }
.papel .motivos .motivo-papel .num { flex: 0 0 5mm; }
.papel .motivos .motivo-papel .texto { flex: 1; }
.papel .motivos .motivo-papel .marca-x {
  flex: 0 0 auto; font-weight: 700; white-space: nowrap;
}
/* El "otro, especifique" ocupa las dos columnas porque lleva su propia raya. */
.papel .motivos .motivo-papel.ancha { grid-column: 1 / -1; }
.papel .motivos .motivo-papel .escrito {
  flex: 1; border-bottom: 1px solid var(--tinta-papel); padding: 0 1mm;
}

/* --- Descripcion ----------------------------------------------------------- */

.papel .descripcion { margin: 2mm 0 3mm; }
.papel .descripcion .etiqueta { font-weight: 700; }
/* Un recuadro y dentro el texto, en vez de rayas sueltas: escrito a maquina la
   raya sirve de guia, pero impreso lo unico que hace es cortar los renglones.
   Con el marco se lee como un bloque, que es lo que es.

   Alto para seis renglones. El texto los llena y, si sobra, la caja crece: el
   resto de la hoja esta medido para que con seis quepa todo en una pagina.
   `pre-wrap` porque el parrafo de inasistencias y el texto comun del lote van
   separados por un salto de linea, y sin esto se leerian pegados. */
.papel .descripcion .caja {
  margin-top: 2mm;
  border: 1px solid var(--tinta-papel);
  padding: 2mm 2.5mm;
  min-height: 33mm;
  line-height: 5.5mm;
  white-space: pre-wrap;
  word-break: break-word;
}

/* --- Firmas ---------------------------------------------------------------- */

.papel .firmas { margin-top: auto; padding-top: 4mm; }
.papel .firma-linea {
  display: flex; gap: 3mm; align-items: baseline; margin-bottom: 4mm;
}
.papel .firma-linea .etiqueta { font-weight: 700; white-space: nowrap; }
.papel .firma-linea .raya { flex: 1; border-bottom: 1px solid var(--tinta-papel); }

.papel .pie-firmas {
  display: flex; gap: 10mm; justify-content: space-between;
  text-align: center; margin-top: 4mm;
}
.papel .pie-firmas > div { flex: 1; }
.papel .pie-firmas .raya-firma {
  border-top: 1px solid var(--tinta-papel);
  margin-bottom: 1.5mm;
}
.papel .pie-firmas .nombre { font-weight: 700; font-size: 9.5pt; }
.papel .pie-firmas .cargo { font-size: 8pt; }
.papel .pie-firmas .fundamento { font-size: 6.5pt; line-height: 1.3; margin-top: 1mm; }

.papel .pie-plantel {
  margin-top: 3mm; padding-top: 2mm;
  border-top: 1px solid var(--tinta-papel);
  /* Centrados: el logotipo del ano es mucho mas alto que las dos lineas del
     domicilio, y alineados por abajo el texto se descuelga del bloque. */
  display: flex; gap: 6mm; align-items: center;
  font-size: 6.5pt; line-height: 1.35;
}
.papel .pie-plantel .logo-anio { flex: 0 0 auto; height: 20mm; width: auto; }
.papel .pie-plantel .domicilio { flex: 1; min-width: 0; }

/* --- En pantalla ----------------------------------------------------------- */

/* La hoja mide 216 mm y la pantalla casi nunca. Se encoge entera, sin
   recomponerla: lo que se esta mirando es el papel, y verlo de otra forma
   engana sobre lo que va a salir de la impresora.

   El encogido va siempre y no bajo un `max-width`: lo que decide es si el
   papel cabe en el hueco que hay, y ese hueco no depende solo del tamano de la
   pantalla. En el escritorio la columna de la aplicacion tambien es mas
   estrecha que una carta, y ahi la hoja se cortaba por la derecha. */
#vista-hoja .contenido {
  background: #6b7280;
  padding: 16px 8px 90px;
  max-width: none;
}
#vista-hoja .lienzo { overflow: hidden; }
#vista-hoja .papeles {
  transform: scale(var(--zoom-papel, 1));
  transform-origin: top left;
  width: 216mm;
}

/* --- Al imprimir ----------------------------------------------------------- */

@media print {
  /* Fuera todo lo que no sea la hoja: la aplicacion no se imprime. */
  body > *:not(#vista-hoja) { display: none !important; }
  #vista-hoja, #vista-hoja .contenido, #vista-hoja .lienzo { all: unset; display: block; }
  #vista-hoja .barra, #vista-hoja .barra-accion, #vista-hoja .aviso-membrete {
    display: none !important;
  }
  #vista-hoja .papeles { transform: none !important; width: auto; }

  .papel {
    /* Con alto minimo, no en cero: las firmas van con `margin-top: auto` y sin
       un alto que llenar se suben a pegarse a la descripcion. En el papel
       firman abajo, y ademas asi lo impreso sale como lo que se vio en
       pantalla. 258 de los 267.4 utiles: los 9 de holgura son para que un
       redondeo del navegador no mande la hoja a una segunda pagina. */
    width: auto; min-height: 258mm;
    /* Arriba y abajo lo justo: el margen de @page ya deja el suyo, y sumados
       se comian la altura que la hoja necesita para caber en una pagina. */
    margin: 0; padding: 8mm 12mm;
    box-shadow: none;
    /* Una hoja por alumno, y la ultima sin pagina en blanco detras. */
    break-after: page;
  }
  .papel:last-child { break-after: auto; }
  /* Ningun campo se parte entre dos paginas. */
  .papel .firmas, .papel .motivos, .papel .descripcion { break-inside: avoid; }
  /* Los logotipos son el membrete: sin ellos la hoja no es la hoja. Muchos
     navegadores no imprimen fondos por omision, pero un <img> si sale; esto es
     para el ajuste de color, que si se puede pedir. */
  .papel img { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* La hoja tiene que caber en UNA pagina: si se pasa un milimetro, cada alumno
   sale en dos hojas y el lote se duplica. De ahi que el margen sea corto --el
   papel ya trae el suyo en el padding-- y que las medidas de arriba esten
   ajustadas al alto disponible: 279.4 - 12 = 267.4 mm. */
@page {
  size: letter;
  margin: 6mm;
}