/* =============================================================================
   playground.edubox.app  |  hoja-impresion.css
   Impresión del Generador de Diplomas, Reconocimientos y Carnets (PLAN §4).

   - 1 diploma por página; carnets/gafetes varios por hoja con marcas de corte.
   - La orientación de @page se cambia en tiempo de ejecución con
     fijarOrientacion('portrait' | 'landscape') que inyecta #hl-page-rule.
   - print-color-adjust: exact es imprescindible: sin él el navegador descarta
     los fondos y el diploma sale en blanco.
   ============================================================================= */

/* En pantalla el contenedor imprimible permanece oculto */
.hl-impresion { display: none; }

/* Hoja de carnets: carta apaisada, celdas de rejilla y marcas de corte */
.hl-hoja-carnets {
    position: relative;
    width: 27.94cm;
    height: 21.59cm;
    margin: 0 auto;
    display: grid;
    gap: 0;
    background: #ffffff;
}
.hl-celda-carnet {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
}
.hl-celda-carnet .hl-diploma { box-shadow: none; }

/* Marcas de corte: solo visibles al imprimir (§2.3) */
.hl-marca-corte {
    display: none;
    position: absolute;
    width: 4mm;
    height: 4mm;
    border: 0 solid #9ca3af;
    z-index: 3;
    pointer-events: none;
}
.hl-marca-corte--tl { top: 0; left: 0; border-top: 1px dashed #9ca3af; border-left: 1px dashed #9ca3af; }
.hl-marca-corte--tr { top: 0; right: 0; border-top: 1px dashed #9ca3af; border-right: 1px dashed #9ca3af; }
.hl-marca-corte--bl { bottom: 0; left: 0; border-bottom: 1px dashed #9ca3af; border-left: 1px dashed #9ca3af; }
.hl-marca-corte--br { bottom: 0; right: 0; border-bottom: 1px dashed #9ca3af; border-right: 1px dashed #9ca3af; }

/* -----------------------------------------------------------------------------
   Impresión
   ----------------------------------------------------------------------------- */
@media print {

    @page { size: letter landscape; margin: 0; }

    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
    }

    /* Los contenedores de la web no deben añadir márgenes al papel */
    main.box-container,
    main.container,
    main.container-fluid,
    main.container-fluid-custom,
    .box-container {
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Nada de la interfaz ni de la web se imprime */
    .box-public-nav, .box-public-footer, .box-announce, .box-nav-drawer,
    .box-overlay, .box-to-top, .box-toast-container,
    .hl-editor, .box-no-print {
        display: none !important;
    }

    .hl-impresion { display: block; }

    /* 1 diploma por página; el diseño trae sus propios márgenes */
    .hl-hoja {
        padding: 0;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        break-after: page;
    }
    .hl-hoja:last-child { break-after: auto; }

    .hl-hoja-carnets { break-after: page; }
    .hl-hoja-carnets:last-child { break-after: auto; }

    /* Sin sombra de pantalla sobre el papel */
    .hl-diploma,
    .hl-hoja .hl-diploma,
    .hl-hoja-carnets .hl-diploma { box-shadow: none !important; }

    /* Solo visibles al imprimir */
    .hl-marca-corte { display: block !important; }

    /* Imprescindible para que los fondos de color salgan impresos */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}