/*
 * Piel de la impresión de RecuPro (B6; research R2, R3 y R25; contracts/interfaz-impresion.md). Se enlaza detrás de piel.css y
 * piel-rtf.css y usa sus variables. Una sección por tarea: «botones» (T017), «diálogos» (T018) y «vista previa» (T019).
 * Reglas, como en piel.css:
 *   - colores y medidas propias en variables de :root (un bloque, solo con las de B6); fuera de :root no hay colores literales;
 *   - sin estilos en línea en los componentes: la CSP solo admite hojas de 'self' (el zoom va por clases);
 *   - a diferencia de piel.css, aquí sí hay @font-face, @page y @media print: son lo que hace que las páginas SVG de QuestPDF se
 *     vean con su letra y se impriman a tamaño real, una por hoja y sin el armazón (lo comprobó la prueba de concepto, R25).
 */

:root {
    /* --- Propios de RecuPro (B6; no medidos en GesPro) --- */
    --rp-dialogo-formato-ancho: 30em;
    --rp-dialogo-impresion-ancho: 46em;
    --rp-dialogo-informe-ancho: 62em;
    --rp-dialogo-mandatos-ancho: 44em;
    --rp-botonera-impresion-ancho: 9.5em;
    --rp-informe-control-corto: 9.5em;
    --rp-informe-anio-ancho: 5.5em;
    --rp-informe-fecha-ancho: 9.5em;
    --rp-vista-ancho: 940px;
    --rp-vista-alto: 88%;
    --rp-vista-texto-ancho: 12em;
    --rp-vista-numero-ancho: 3.5em;
    --rp-vista-icono-lado: 28px;
    --rp-vista-no-esta-ancho: 4em;
    --rp-hojas-fondo: #8F9BB0;
    --rp-hoja-fondo: #FFFFFF;
    --rp-hoja-hueco: #F2F2F2;
    --rp-hoja-sombra: rgba(0, 0, 0, 0.35);
    --rp-hoja-separacion: 12px;
    --rp-hoja-ancho: 210mm;
    --rp-hoja-alto: 297mm;
    --rp-vista-hecho-fondo: #E6F4E1;
    --rp-vista-hecho-texto: #2D5A1E;
    --rp-vista-hecho-borde: #8DC37A;
}

/* ================================================================== Botones (T017; contracts/interfaz-impresion.md §1)
 * Listados, Imprimir y Enviar usan los botones del ribbon y de la barra de la ficha (piel.css); Imprimir ▾ despliega sus
 * formatos en el menú contextual de la rejilla. Aquí, solo que una opción deshabilitada de ese menú se vea apagada (los
 * formatos con su motivo; también Borrar, Listados… e Imprimir… de la rejilla).
 */

.rp-menu-contextual-opcion:disabled {
    background: transparent;
    color: var(--rp-deshabilitado-texto);
}

/* ================================================================== Diálogos (T018; contracts/interfaz-impresion.md §2-§5)
 * Sobre DialogoModal (piel.css): los campos a la izquierda y la botonera vertical a la derecha, como SH-26; Cancelar, en el pie.
 * Los bloques (Series, Fechas, los propios y Opciones), en recuadros con su rótulo; las opciones, con los campos de B3.
 */

/* --- Selector de formato y de listado --- */

.rp-dialogo-formato {
    width: var(--rp-dialogo-formato-ancho);
}

.rp-formato-opciones {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rp-formato-opcion {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    column-gap: 6px;
}

.rp-formato-radio {
    margin: 0;
    accent-color: var(--rp-foco);
}

.rp-formato-radio:focus {
    outline: 1px solid var(--rp-foco);
    outline-offset: 1px;
}

.rp-formato-no-disponible .rp-formato-rotulo {
    color: var(--rp-deshabilitado-texto);
}

.rp-formato-motivo {
    grid-column: 2;
    color: var(--rp-texto-activo);
    font-size: var(--rp-campo-nota-tamano);
    font-style: italic;
}

.rp-formato-vacio {
    margin: 0;
    font-style: italic;
}

/* --- Diálogos de impresión de documentos, de listado e informe y de mandatos --- */

.rp-dialogo-impresion {
    width: var(--rp-dialogo-impresion-ancho);
}

.rp-dialogo-impresion.rp-dialogo-informe {
    width: var(--rp-dialogo-informe-ancho);
}

.rp-dialogo-impresion.rp-dialogo-mandatos {
    width: var(--rp-dialogo-mandatos-ancho);
}

.rp-impresion-dialogo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--rp-botonera-impresion-ancho);
    align-items: start;
    gap: 0 16px;
}

.rp-impresion-campos {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.rp-impresion-botonera {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rp-impresion-botonera > .rp-boton {
    width: 100%;
    padding: 3px 10px;
    text-align: left;
}

.rp-impresion-casilla {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
}

.rp-impresion-casilla .rp-campo-nota {
    flex-basis: 100%;
}

.rp-impresion-nota {
    margin: 0;
    color: var(--rp-texto-activo);
    font-size: var(--rp-campo-nota-tamano);
}

.rp-impresion-resumen {
    margin: 0;
    font-weight: 600;
}

.rp-informe-bloque {
    min-width: 0;
    margin: 0;
    padding: 2px 8px 6px;
    border: 1px solid var(--rp-borde-paneles);
}

.rp-informe-bloque-rotulo {
    padding: 0 4px;
    color: var(--rp-etiqueta);
    font-weight: 600;
}

.rp-informe-opciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
}

.rp-informe-opcion {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.rp-informe-control {
    grid-column: 2 / -1;
}

.rp-informe-condiciones {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rp-informe-resumen {
    font-style: italic;
}

.rp-informe-control-corto {
    width: var(--rp-informe-control-corto);
}

.rp-informe-anio {
    width: var(--rp-informe-anio-ancho);
}

.rp-informe-fecha {
    width: var(--rp-informe-fecha-ancho);
}

.rp-informe-de-anio {
    color: var(--rp-texto-activo);
}

.rp-selector-fechas .rp-campo-nota,
.rp-selector-series .rp-campo-nota {
    display: block;
}

/* ================================================================== Vista previa (T019; contracts/interfaz-impresion.md §6-§7)
 * La letra Lato de QuestPDF (OFL, en letra/) para las páginas SVG: el SVG pide los grosores un escalón por debajo (negrita →
 * 600, Black → 800, R25), así que cada cara se declara con un intervalo de grosores y no se depende del algoritmo de elección.
 * Con Arial (la del puesto), estas caras no se usan.
 */

@font-face {
    font-family: "Lato";
    src: url("letra/Lato-Regular.ttf") format("truetype");
    font-weight: 100 500;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "Lato";
    src: url("letra/Lato-Italic.ttf") format("truetype");
    font-weight: 100 500;
    font-style: italic;
    font-display: block;
}

@font-face {
    font-family: "Lato";
    src: url("letra/Lato-Bold.ttf") format("truetype");
    font-weight: 600 700;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "Lato";
    src: url("letra/Lato-BoldItalic.ttf") format("truetype");
    font-weight: 600 900;
    font-style: italic;
    font-display: block;
}

@font-face {
    font-family: "Lato";
    src: url("letra/Lato-Black.ttf") format("truetype");
    font-weight: 800 900;
    font-style: normal;
    font-display: block;
}

/* --- La ventana de la vista previa: más grande que una ficha y sin el relleno del cuerpo (las hojas llevan el suyo) --- */

.rp-ficha:has(> .rp-ficha-cuerpo > .rp-hojas) {
    width: var(--rp-vista-ancho);
    height: var(--rp-vista-alto);
}

.rp-ficha-cuerpo:has(> .rp-hojas) {
    padding: 0;
    overflow: hidden;
}

/* --- La barra (SH-27) --- */

.rp-vista-barra {
    flex-wrap: wrap;
    align-items: center;
}

.rp-vista-buscar {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 4px;
}

.rp-vista-rotulo {
    color: var(--rp-etiqueta);
}

.rp-vista-texto {
    width: var(--rp-vista-texto-ancho);
}

.rp-vista-no-esta {
    min-width: var(--rp-vista-no-esta-ancho);
    color: var(--rp-aviso-texto);
    font-weight: 600;
}

.rp-vista-zoom {
    width: auto;
    margin: 0 4px;
}

.rp-vista-pagina {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 4px;
    white-space: nowrap;
}

.rp-vista-numero {
    width: var(--rp-vista-numero-ancho);
    text-align: right;
}

.rp-vista-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--rp-vista-icono-lado);
    height: var(--rp-vista-icono-lado);
    padding: 0;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    cursor: default;
}

.rp-vista-icono:enabled:hover,
.rp-vista-icono:enabled:focus {
    outline: none;
    border-color: var(--rp-borde-paneles);
    background: var(--rp-arbol-seleccion);
}

.rp-vista-icono:disabled .rp-icono-vista {
    opacity: 0.45;
    filter: grayscale(1);
}

.rp-icono-vista {
    width: 20px;
    height: 20px;
}

/* --- El aviso de la marca, debajo de la barra --- */

.rp-vista-aviso {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px;
    border-bottom: 1px solid var(--rp-aviso-entorno-borde);
    background: var(--rp-aviso-entorno-fondo);
    color: var(--rp-aviso-entorno-texto);
    font-weight: 600;
}

.rp-vista-aviso.rp-vista-aviso-hecho {
    border-bottom-color: var(--rp-vista-hecho-borde);
    background: var(--rp-vista-hecho-fondo);
    color: var(--rp-vista-hecho-texto);
}

.rp-vista-aviso.rp-vista-aviso-error {
    border-bottom-color: var(--rp-aviso-texto);
    background: var(--rp-aviso-fondo);
    color: var(--rp-aviso-texto);
}

/* --- Las hojas: una columna con desplazamiento; cada hoja, con el tamaño de su zoom (contenedor de consulta para la página
       entera y el ancho) --- */

.rp-hojas {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: safe center;
    gap: var(--rp-hoja-separacion);
    min-height: 0;
    padding: var(--rp-hoja-separacion);
    overflow: auto;
    scrollbar-gutter: stable;
    container-type: size;
    background: var(--rp-hojas-fondo);
}

.rp-hojas:focus {
    outline: 1px solid var(--rp-foco);
    outline-offset: -1px;
}

.rp-hojas-estado {
    margin: 0;
    padding: 4px 10px;
    background: var(--rp-panel-fondo);
    color: var(--rp-texto-activo);
}

.rp-hojas-estado.rp-hojas-error {
    background: var(--rp-aviso-fondo);
    color: var(--rp-aviso-texto);
    font-weight: 600;
}

.rp-hoja {
    flex: none;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--rp-hoja-fondo);
    box-shadow: 0 1px 4px var(--rp-hoja-sombra);
}

.rp-hoja > svg {
    display: block;
    width: 100%;
    height: 100%;
}

.rp-hoja-hueco {
    background: var(--rp-hoja-hueco);
}

.rp-hoja-z50 {
    width: calc(var(--rp-hoja-ancho) * 0.5);
    height: calc(var(--rp-hoja-alto) * 0.5);
}

.rp-hoja-z75 {
    width: calc(var(--rp-hoja-ancho) * 0.75);
    height: calc(var(--rp-hoja-alto) * 0.75);
}

.rp-hoja-z100 {
    width: var(--rp-hoja-ancho);
    height: var(--rp-hoja-alto);
}

.rp-hoja-z125 {
    width: calc(var(--rp-hoja-ancho) * 1.25);
    height: calc(var(--rp-hoja-alto) * 1.25);
}

.rp-hoja-z150 {
    width: calc(var(--rp-hoja-ancho) * 1.5);
    height: calc(var(--rp-hoja-alto) * 1.5);
}

.rp-hoja-z200 {
    width: calc(var(--rp-hoja-ancho) * 2);
    height: calc(var(--rp-hoja-alto) * 2);
}

.rp-hoja-z50.rp-hoja-apaisada {
    width: calc(var(--rp-hoja-alto) * 0.5);
    height: calc(var(--rp-hoja-ancho) * 0.5);
}

.rp-hoja-z75.rp-hoja-apaisada {
    width: calc(var(--rp-hoja-alto) * 0.75);
    height: calc(var(--rp-hoja-ancho) * 0.75);
}

.rp-hoja-z100.rp-hoja-apaisada {
    width: var(--rp-hoja-alto);
    height: var(--rp-hoja-ancho);
}

.rp-hoja-z125.rp-hoja-apaisada {
    width: calc(var(--rp-hoja-alto) * 1.25);
    height: calc(var(--rp-hoja-ancho) * 1.25);
}

.rp-hoja-z150.rp-hoja-apaisada {
    width: calc(var(--rp-hoja-alto) * 1.5);
    height: calc(var(--rp-hoja-ancho) * 1.5);
}

.rp-hoja-z200.rp-hoja-apaisada {
    width: calc(var(--rp-hoja-alto) * 2);
    height: calc(var(--rp-hoja-ancho) * 2);
}

/* La página entera cabe a lo ancho y a lo alto de la zona; el ancho de página, a lo ancho (las unidades cq son las de .rp-hojas). */

.rp-hoja-entera {
    width: min(100cqw, calc(100cqh * 210 / 297));
    height: auto;
    aspect-ratio: 210 / 297;
}

.rp-hoja-entera.rp-hoja-apaisada {
    width: min(100cqw, calc(100cqh * 297 / 210));
    aspect-ratio: 297 / 210;
}

.rp-hoja-ancho {
    width: 100cqw;
    height: auto;
    aspect-ratio: 210 / 297;
}

.rp-hoja-ancho.rp-hoja-apaisada {
    aspect-ratio: 297 / 210;
}

/* --- Imprimir (R25): el contenedor propio de <body> (HojasImpreso.razor.js) no se ve en pantalla; en el papel, solo él, sin
       márgenes del navegador (y por eso sin su cabecera ni su pie), una página por hoja y cada una con su orientación (página
       con nombre por hoja, así vale un trabajo mixto) --- */

.rp-impresion {
    display: none;
}

@page {
    size: A4 portrait;
    margin: 0;
}

@page rp-apaisada {
    size: A4 landscape;
    margin: 0;
}

@media print {
    html.rp-imprimiendo,
    html.rp-imprimiendo body {
        margin: 0;
        padding: 0;
        background: var(--rp-hoja-fondo);
    }

    html.rp-imprimiendo body > :not(.rp-impresion) {
        display: none !important;
    }

    html.rp-imprimiendo body > .rp-impresion {
        display: block;
    }

    .rp-impresion .rp-hoja {
        width: var(--rp-hoja-ancho);
        height: var(--rp-hoja-alto);
        margin: 0;
        overflow: hidden;
        box-shadow: none;
        break-after: page;
        break-inside: avoid;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .rp-impresion .rp-hoja-apaisada {
        width: var(--rp-hoja-alto);
        height: var(--rp-hoja-ancho);
        page: rp-apaisada;
    }

    .rp-impresion .rp-hoja:last-child {
        break-after: auto;
    }
}