/* =========================================================
   RENDERSET - DOCUMENTO
   Estilos del informe generado.

   Vive en Renderset.Blazor y no en Renderset.Web porque lo consumen dos
   sitios: el preview del diseñador, que lo enlaza como asset de la RCL, y
   el HTML que emite la API, que lo incrusta como recurso embebido. Una sola
   copia, o el documento acabaría pareciéndose al preview sólo de lejos.
   ========================================================= */

/* =========================================================
   1. REPORT RENDERER
   ========================================================= */

/* ---------- Base ---------- */

.dynamic-report {
    width: 100%;
    color: var(--report-text);
    background: var(--report-background);
    font-family: var(--report-font);
}


/* ---------- Header ---------- */

.report-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--report-border);
}

    /* El logo a la derecha es sólo el mismo flex al revés: así el contenido
       no cambia de orden en el DOM y sigue leyéndose igual. */
    .report-header.is-logo-right {
        flex-direction: row-reverse;
    }

    .report-header.is-stacked {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }

    .report-header.is-borderless {
        padding-bottom: 0;
        border-bottom: 0;
    }

    /* Con fondo propio deja de ser una banda transparente y necesita
       respirar por dentro. */
    .report-header.is-filled {
        padding: 16px 20px;
        border-radius: 6px;
    }

.report-header-logo img {
    max-width: 140px;
    max-height: 70px;
    object-fit: contain;
}

.report-header-lines {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.report-header-line {
    line-height: 1.45;
}

    .report-header-line.is-strong {
        font-weight: 700;
    }

    .report-header-line.is-muted {
        color: var(--report-muted);
    }

    .report-header-line.is-small {
        font-size: 12px;
    }

/* Sobre un fondo de color, el gris del tema puede quedar ilegible: se
       hereda el color de la cabecera y se baja la intensidad. */
.report-header.is-filled .report-header-line.is-muted {
    color: inherit;
    opacity: .8;
}

.report-header-content {
    flex: 1;
}

    .report-header-content h1 {
        margin: 0;
        color: var(--report-title, inherit);
        font-size: 24px;
        font-weight: 700;
    }

.report-header-subtitle {
    margin-top: 4px;
    color: var(--report-muted);
}

/* QR: al borde derecho en los tres diseños. Con el logo a la derecha la
   cabecera va en row-reverse, así que ahí se le da order -1 para que no
   salte al lado izquierdo. Fondo blanco propio: sobre una cabecera de color
   un QR sin margen claro no lo lee ningún móvil. */
.report-header-qr {
    flex: none;
    align-self: center;
    padding: 4px;
    border-radius: 4px;
    background: #FFFFFF;
    line-height: 0;
}

    .report-header-qr svg {
        display: block;
    }

.report-header.is-logo-right .report-header-qr {
    order: -1;
}

.report-header.is-stacked .report-header-qr {
    align-self: center;
}


/* ---------- Rows ---------- */

/* Una fila sólo aparece cuando hay dos o más elementos que comparten línea.
   Se reparte con flex-grow y no con una rejilla de doce columnas fijas
   porque así, si uno de los elementos se oculta por configuración, los que
   quedan reparten el hueco en vez de dejarlo vacío. */

.dynamic-report-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.dynamic-report-column {
    /* El crecimiento lo pone el renderer en el style del elemento, que es
       el único dato que cambia por columna. */
    flex-shrink: 1;
    flex-basis: 0;

    /* Sin esto, una tabla ancha estira su columna y rompe el reparto: el
       contenido mínimo de un flex item es su contenido, no cero. */
    min-width: 0;
}

    /* La sección ya trae su propio margen inferior; dentro de una columna
       sobra, porque el margen lo pone la fila. */
    .dynamic-report-column > .dynamic-report-section:last-child {
        margin-bottom: 0;
    }


/* ---------- Sections ---------- */

.dynamic-report-section {
    margin-bottom: 18px;
}

.dynamic-report-section-title {
    margin-bottom: 8px;
    padding: 8px 10px;
    background: var(--report-section-bg);
    color: var(--report-section-text);
    font-size: 13px;
    font-weight: 700;
}

.dynamic-report-repeat-item + .dynamic-report-repeat-item {
    margin-top: 14px;
}

.dynamic-report-section.is-depth-1 {
    margin-left: 0;
    padding-left: 12px;
    border-left: 2px solid var(--report-secondary, #E8EFF3);
}

.dynamic-report-section.is-depth-2 {
    padding-left: 12px;
    border-left: 2px solid var(--report-border, #D8E1E7);
}

/* =========================================================
   SECTION GRID LAYOUTS
   ========================================================= */

.dynamic-report-grid {
    display: grid;
    grid-template-columns: repeat(var(--report-grid-columns, 2), minmax(0, 1fr));
    border-top: 1px solid var(--report-border);
    border-left: 1px solid var(--report-border);
}

.dynamic-report-metric {
    min-width: 0;
    min-height: 58px;
    padding: 9px 11px;
    box-sizing: border-box;
    border-right: 1px solid var(--report-border);
    border-bottom: 1px solid var(--report-border);
    background: var(--report-background);
}

.dynamic-report-metric-label {
    margin-bottom: 5px;
    color: var(--report-muted);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: .025em;
}

.dynamic-report-metric-value {
    color: var(--report-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* Con 6 columnas o más las celdas son estrechas. */
.dynamic-report-grid.is-dense .dynamic-report-metric {
    min-height: 48px;
    padding: 7px 8px;
}

.dynamic-report-grid.is-dense .dynamic-report-metric-label {
    font-size: 8px;
}

.dynamic-report-grid.is-dense .dynamic-report-metric-value {
    font-size: 12px;
}

/* ---------- Fields ---------- */

.dynamic-report-fields {
    border: 1px solid var(--report-border);
}

.dynamic-report-field {
    min-height: 30px;
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    border-bottom: 1px solid var(--report-border);
}

    .dynamic-report-field:last-child {
        border-bottom: 0;
    }

.dynamic-report-field-label {
    padding: 7px 10px;
    background: var(--report-field-label-bg, #f8fafb);
    color: var(--report-muted);
    font-size: 12px;
    font-weight: 600;
}

.dynamic-report-field-value {
    min-width: 0;
    padding: 7px 10px;
    overflow-wrap: anywhere;
}

/* ---------- Tables ---------- */

.dynamic-report-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 12px;
}

    .dynamic-report-table th {
        padding: 8px 10px;
        background: var(--report-table-header-bg);
        color: var(--report-table-header-text);
        border: 1px solid var(--report-border);
        text-align: left;
        font-weight: 700;
    }

    .dynamic-report-table td {
        padding: 8px 10px;
        border: 1px solid var(--report-border);
    }

    /* Bandas opcionales del tema: sin la variable, transparentes. */
    .dynamic-report-table tbody tr:nth-child(even) td {
        background: var(--report-table-stripe, transparent);
    }

    .dynamic-report-table .number {
        text-align: right;
    }

    /* Fila de totales: separada del cuerpo y en negrita, con el fondo
       secundario del tema. */
    .dynamic-report-table tfoot td {
        padding: 8px 10px;
        border: 1px solid var(--report-border);
        border-top: 2px solid var(--report-text);
        background: var(--report-secondary, #E8EFF3);
        font-weight: 700;
    }

    .dynamic-report-table tfoot .is-total-label {
        color: var(--report-muted);
        font-size: 10px;
        letter-spacing: .04em;
        text-transform: uppercase;
    }


/* ---------- Footer ---------- */

.report-footer {
    margin-top: 28px;
    padding-top: 12px;
    border-top: 1px solid var(--report-border);
    color: var(--report-muted);
    font-size: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
}

.report-footer-text {
    flex: 1;
}

.report-footer-generation-date {
    flex-shrink: 0;
    white-space: nowrap;
}

/* =========================================================
   PÁGINA DEL DOCUMENTO GENERADO

   Sólo aplica al HTML que emite la API: en el diseñador, el preview vive
   dentro de su propio papel y no hay <body> que preparar.
   ========================================================= */

.report-document-page {
    margin: 0;
    padding: 24px;
    background: #eef2f4;
    color: #1f2933;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.report-document-sheet {
    width: 100%;
    max-width: 210mm;
    margin: 0 auto;
    padding: 18mm 16mm;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0 2px 14px rgba(15, 35, 50, .12);
}

@media print {
    .report-document-page {
        padding: 0;
        background: #ffffff;
    }

    .report-document-sheet {
        max-width: none;
        margin: 0;
        padding: 0;
        box-shadow: none;
    }

    /* Un albarán partido entre dos páginas es la queja número uno de
       cualquier informe de ERP. */
    .dynamic-report-repeat-item,
    .dynamic-report-table tr {
        break-inside: avoid;
    }

    /* Por defecto el navegador repite el tfoot al pie de cada página, como
       el thead arriba. Un total parcial en cada hoja confunde: sólo al final. */
    .dynamic-report-table tfoot {
        display: table-row-group;
    }

    /* Dos secciones en paralelo cortadas por el salto de página quedan
       descolocadas entre sí, que es peor que empezar la fila en la página
       siguiente. */
    .dynamic-report-row {
        break-inside: avoid;
    }
}

/* ---------- Header columns ---------- */

.report-header-columns {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-top: 10px;
    width: 100%;
}

.report-header-column {
    min-width: 0;
    flex-grow: 1;
}

.report-header-column.is-align-left,
.dynamic-report-text-block.is-align-left {
    text-align: left;
}

.report-header-column.is-align-center,
.dynamic-report-text-block.is-align-center {
    text-align: center;
}

.report-header-column.is-align-right,
.dynamic-report-text-block.is-align-right {
    text-align: right;
}

/* En stacked el contenido puede seguir usando columnas: centrar el bloque de
   cabecera no debe forzar la alineación elegida dentro de cada columna. */
.report-header.is-stacked .report-header-columns {
    align-self: stretch;
}

@media (max-width: 640px) {
    .report-header-columns {
        flex-direction: column;
        gap: 10px;
    }

    .report-header-column {
        flex-basis: auto !important;
        width: 100%;
    }
}