/*
 * La hoja de impresión de los carnets (/gestion/carnets-imprimir,
 * docs/credenciales.md «Carnets impresos»): A4 con 10 y marcas de corte, o
 * una por página para la impresora de tarjetas de PVC, con la barra de
 * arriba y la ventana «Para la imprenta». Su diseño se elige en Socios ›
 * Ajustes (diseno-carnet.css).
 *
 * Solo la carga plantillas/gestion/carnets-imprimir.php, después de
 * panel.css, gestion.css y carnet-tarjeta.css. El cuerpo lleva `app-panel`
 * (botones y descargas como en el resto del panel), sin su rejilla con el
 * menú. De carnet-tarjeta.css, la tarjeta en sí (la del móvil del socio):
 * aquí solo su tamaño en la hoja. Las piezas van en el orden en que salen:
 *
 *   1. La página: del panel, pero sin el menú
 *   2. La barra de arriba y los avisos
 *   3. Las hojas: A4 con marcas de corte o una tarjeta por página
 *   4. La ventana «Para la imprenta»
 *   5. En papel
 *
 * Colores, radios y espacios, de tokens de base.css; el móvil, junto a cada
 * pieza.
 */

/* #region 1. La página: del panel, pero sin el menú */
body.app-panel.carnets-hoja-pagina {
    display: block;
}
/* #endregion */

/* #region 2. La barra de arriba y los avisos */
.carnets-barra {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-3);
    padding: var(--espacio-3) var(--espacio-4);
    background: var(--rs-superficie-1);
    border-bottom: 1px solid var(--rs-borde);
}

.carnets-barra__titulo {
    flex: 1;
    min-width: 12rem;
}

.carnets-barra__titulo h1 {
    margin: 0;
    font-size: 1.15rem;
}

.carnets-barra__titulo p {
    margin: 0;
    color: var(--rs-texto-secundario);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.carnets-barra__lotes,
.carnets-barra__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

.carnets-barra__lotes:not(:has(> :not([hidden]))) {
    display: none;
}

/* En el móvil, sin quedarse fija (ocuparía media pantalla): volver y el título arriba; «Imprimir» a lo
   ancho y, debajo, las otras dos, una al lado de la otra. */
@media (max-width: 767px) {
    .carnets-barra {
        position: static;
    }

    .carnets-barra__acciones {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        flex-basis: 100%;
    }

    .carnets-barra__acciones .boton {
        justify-content: center;
        padding-inline: var(--espacio-2);
    }

    #carnets-imprimir {
        grid-column: 1 / -1;
        grid-row: 1;
    }
}

.carnets-avisos {
    display: grid;
    gap: var(--espacio-3);
    max-width: 60rem;
    margin: var(--espacio-4) auto 0;
    padding-inline: var(--espacio-4);
}

.carnets-avisos .aviso {
    margin: 0;
}

/* El consejo de cómo imprimir, con «Cambiar el diseño» al final, en el color de la asociación. */
.carnets-consejo__diseno {
    color: var(--marca-acento);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.carnets-consejo__diseno:hover {
    text-decoration: none;
}

/* Sin ninguno que imprimir: lo dice y lleva a la lista. */
.carnets-vacio {
    display: grid;
    justify-items: center;
    gap: var(--espacio-2);
}

.carnets-vacio[hidden] {
    display: none;
}

.carnets-vacio p {
    margin: 0;
}
/* #endregion */

/* #region 3. Las hojas: A4 con marcas de corte o una tarjeta por página */
.carnets-hojas {
    display: grid;
    justify-items: center;
    gap: var(--espacio-5);
    padding: var(--espacio-5) var(--espacio-4);
    overflow-x: auto;
}

.carnets-hoja {
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0 6px 24px -10px rgb(0 0 0 / 0.45);
}

.carnets-hoja--a4 {
    display: grid;
    grid-template-columns: repeat(2, 85.6mm);
    grid-auto-rows: 53.98mm;
    gap: 2mm 4mm;
    align-content: start;
    justify-content: center;
    width: 210mm;
    height: 297mm;
    padding: 9mm 0;
}

/* A tamaño real; las marcas de corte, una línea fina gris que sigue sus esquinas redondeadas. */
.carnets-hoja .carnet-impreso {
    width: 85.6mm;
}

.carnets-hoja--a4 .carnet-impreso .carnet-tarjeta__cara {
    outline: 0.15mm dashed #9aa1ad;
    outline-offset: 0.6mm;
    box-shadow: none;
}

/* Por detrás, a doble cara (volteo por el lado largo): las columnas, cambiadas. */
.carnets-hoja--dorso {
    direction: rtl;
}

.carnets-hoja--dorso .carnet-impreso {
    direction: ltr;
}

.carnets-hoja--tarjeta {
    width: 85.6mm;
    height: 53.98mm;
}

.carnets-hoja--tarjeta .carnet-impreso .carnet-tarjeta__cara {
    box-shadow: none;
}
/* #endregion */

/* #region 4. La ventana «Para la imprenta» */
/* Las descargas, a la izquierda bajo su pregunta (en el resto del panel van a la derecha de su barra). */
.carnets-imprenta .informe-exportar {
    justify-content: flex-start;
    margin: 0;
}

/* «Solo los QR»: el tamaño y para qué, uno al lado del otro (uno bajo otro en el móvil). */
.carnets-qr-opciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-3);
}

.carnets-qr-opciones .campo {
    flex: 1 1 12rem;
    margin: 0;
}

/* Lo de las imprentas que montan ellas: plegado, porque es lo menos habitual. */
.carnets-imprenta-extra > summary {
    cursor: pointer;
    font-weight: 600;
}

.carnets-imprenta-extra[open] > summary {
    margin-bottom: var(--espacio-2);
}

.carnets-imprenta-extra__titulo {
    margin: var(--espacio-3) 0 var(--espacio-1);
    font-weight: 600;
}
/* #endregion */

/* #region 5. En papel */
/* Solo las hojas, sin sombra, cada una en su página; ni la barra, ni los avisos, ni la línea de color del panel. */
@media print {
    body.app-panel.carnets-hoja-pagina {
        background: #ffffff;
    }

    body.app-panel.carnets-hoja-pagina::before,
    body.app-panel.carnets-hoja-pagina::after,
    .carnets-barra,
    .carnets-avisos {
        display: none !important;
    }

    .carnets-hojas {
        display: block;
        padding: 0;
        overflow: visible;
    }

    .carnets-hoja {
        box-shadow: none;
        break-after: page;
        page-break-after: always;
    }

    .carnets-hoja:last-child {
        break-after: auto;
        page-break-after: auto;
    }
}
/* #endregion */