.pageformatBackground {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: repeat;
    background-position: center;
    page-break-before: always;
    page-break-after: always;
  }
.logo{
  display: block !important; /* Muestra el logo en impresión */
}

h2{
  text-align: center;
  font-weight: bold;
}
.logo2 {
  user-select: none;
  display: block !important; 
  font-size: small;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.logo2 img {
  opacity: 0.2; 
}
.dictado{
  display: block !important;
}

.piePagina {
  display: block !important;
  position: absolute;
  top: 90%;
}
.wrap * , .wrap * ::after,.wrap * ::before{
  color:var(--color-principal);
}
.editor *, 
.editor *::after, 
.editor *::before, 
#preview, 
#preview *::after, 
#preview *::before, 
#preview::before, 
#preview::after, 
#preview *, 
.toprint *, 
.toprint *::after, 
.toprint *::before {
  color: #000 !important;
}

.imagenes {
  display: grid;
  padding: 2rem;
  grid-template-columns: repeat(2, 1fr); /* Two columns */
  gap: 20px; /* Gap between grid items (adjust as needed) */
}

.imagenes img {
  width: calc(50vw - 40px); /* Half the width of the viewport minus the gap */
  /* Adjust the gap value to match the gap specified for the grid */
}


@media print {
  .pageformatBackground {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: repeat;
    background-position: center;
    page-break-before: always;
    page-break-after: always;
  }

  /* Ensure the image covers the page and the background is consistent across multiple pages */
  body {
    margin: 0;
    padding: 0;
    height: 100%;
  }

  /* If you need the image to occupy the entire page size, adjust as follows */
  .pageformatBackground img {
    width: 100%;
    height: auto; /* Ensures the image keeps its aspect ratio while scaling */
    object-fit: cover; /* Fills the page while maintaining aspect ratio */
  }
  .gen-conttent,
  .contentc{
    all:unset;
  }
  .nav > * {
    display: none;
  }
  .wrap,
  .editor{
    position: absolute !important;
    top: 0px !important;
    left: 0px !important;
    bottom: 0px !important;
    width: 100% !important;
    height: auto !important;
  }
  .toprint{
    margin: 2rem;
    overflow: auto;
  }
  .page-break {
    page-break-before: always;
  }

  .notoprint,
  .toolbar *:not(.editor) {
    all: unset;
    box-shadow: none;
    display: none !important;
  }

}
.page-break {
  page-break-before: always;
}


            /* Estilos para la impresión y visualización */
            @media print {
              .repbody, #preview {
                margin: 0;
                padding: 0;
                width: 210mm; /* Ajuste de ancho para impresión */
                height: 297mm; /* Ajuste de alto para impresión */
                overflow: hidden; /* Evitar scroll en impresión */
                background-color: #fff !important;
                color: #000 !important;
              }
            }
            .repbody, #preview {
              font-family: Arial, sans-serif;
              margin: 0;
              padding: 0;
              width: 210mm; /* Ajuste de ancho para visualización */
              height: 297mm; /* Ajuste de alto para visualización */
            }
            .repheader {
              text-align: center;
              font-weight: bold;
              font-size: 18px;
              margin-bottom: 20px; /* Espacio entre encabezado y contenido */
            }
            .repfooter {
              position: fixed;
              bottom: 0;
              width: 100%;
              text-align: center;
              font-size: 12px;
            }
            .repwatermark {
              position: fixed;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              opacity: 0.1;
              font-size: 50px;
              color: gray;
              pointer-events: none;
            }