/* Estilos del Disenador de Reportes (KayrosShared/Pages/Reports/ReportDesigner.razor).
   FIX (mismo dia, "podes poner todos los estilos en un archivo .css"): antes vivian en un
   <style> inline dentro del .razor -- se movieron aca tal cual (mismo contenido, sin cambios)
   siguiendo el mismo patron ya usado por kayros_styles.css (archivo estatico en wwwroot/css,
   servido como _content/KayrosShared/css/report_designer.css). Se descarto CSS isolation
   (ReportDesigner.razor.css) porque ese mecanismo depende de un bundle
   _content/KayrosShared/KayrosShared.styles.css que ningun host de esta app linkea hoy (se
   verifico: MainLayout.razor.css/NavMenu.razor.css en este mismo proyecto tampoco estan
   linkeados en ningun index.html) -- hubiera sido un cambio silencioso que rompe los estilos
   en los 3 hosts reales (KayrosWeb, KayrosDesktop, KayrosMobile). Este archivo en cambio
   se linkea explicito con un <link> comun, mismo mecanismo que kayros_styles.css. */

/* FASE 5 (rediseno de UI v2): sin overrides de mudpalette todo lo de aca abajo consume
   las variables tal cual las define el MudThemeProvider global (oscuro o claro). */

.kr-toolbar, .kr-ribbon {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px; padding: 6px 10px;
}
.kr-ribbon { align-items: flex-end; }
.kr-ribbon-group, .kr-toolbar-group { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.kr-toolbar-group { align-items: center; }
.kr-ribbon-divider, .kr-toolbar-divider {
    width: 1px; align-self: stretch; background: var(--mud-palette-lines-default); margin: 2px 6px;
}
.kr-toolbar-zoom-label { min-width: 42px; text-align: center; font-size: 13px; }

/* FIX (mismo dia, "el scroll deberia funcionar dentro del contenedor de la pagina porque sino
   se desplaza hacia arriba la barra de herramientas superior"): el lienzo de Diseno (mas abajo,
   kr-designer-canvas) ahora tiene un ALTO acotado (calc de 100vh) en vez de minheight, para que
   cuando la hoja crece (arrastrando bandas/esquina) sea el lienzo el que muestra su PROPIO
   scrollbar interno  no toda la pagina. Esta clase es una segunda red de seguridad, no la
   solucion principal: si algun calculo de alto queda corto en alguna resolucion y la pagina
   igual llega a scrollear, la barra queda pegada arriba (sticky) en vez de desaparecer con el
   scroll. background solido (ya lo tenia .kr-toolbar) para que no se transparente contenido
   atras al quedar pegada. */
.kr-toolbar--sticky { position: sticky; top: calc(var(--mud-appbar-height) + 4px); z-index: 5; }

/* FIX (mismo dia, "agregar este tipo de zoom en la barra inferior"): input range nativo, no
   MudSlider (sin precedente en el codebase, mismo criterio de riesgo que MudList/MudListItem
   mas abajo). accent-color es lo unico que hace falta para que el thumb/track tomen el color
   primario del tema, sin pelearse con -webkit-appearance/estilos por navegador. */
.kr-zoom-slider { width: 110px; accent-color: var(--mud-palette-primary); cursor: pointer; }

/* FIX (mismo dia, mismo pedido): alto ACOTADO (no min-height, que solo pone un piso pero deja
   crecer sin techo) para el lienzo de Diseno mismo patron calc(100vh - appbar - footer) que
   ya usa .mud-drawer en kayros_styles.css (44px = alto del footer fijo de MainLayout.razor). Los
   ~300px extra son la barra kr-toolbar + el padding de la MudPaper + el header de MudTabs + el
   texto de ayuda ("Arrastra un control...") que quedan ARRIBA de este lienzo dentro del tab --
   "aprox", no hace falta que sea exacto.
   FIX (mismo dia, "la barra de scroll derecha hay que quitar... no debe tener"): ahora que
   MainLayout.razor le pone overflow:hidden al body en esta ruta (para que la UNICA scrollbar
   sea la de este lienzo, no la de toda la ventana), quedarse CORTO en esta cuenta ya no significa
   "aparece una scrollbar de mas" sino "se recorta contenido de mas arriba"  mucho peor. Por eso
   el buffer subio de 260 a 300px, con margen de sobra a proposito.
   FIX (mismo dia, "la barra inferior... abajo donde esta diseno y vista previa"): estos mismos
   300px ahora tambien le hacen lugar a la barra fija nueva (tamano de hoja + zoom) que quedo
   pegada arriba del footer -- ver mas abajo, junto al cierre del div raiz.
   SUPERADO (mismo dia, "al ocultar datos del reporte la parte de abajo no debe cambiar de
   posicion"): esta regla ya NO se usa en el markup (el alto paso a ser inline, calculado por
   DesignerCanvasHeightStyle() en el , que resta 300px o 220px segun _ribbonOpen). Se deja
   aca solo de referencia/fallback historico. */
.kr-designer-canvas { height: calc(100vh - var(--mud-appbar-height) - 44px - 300px); min-height: 320px; }

.kr-tree-row {
    display: flex; align-items: center; justify-content: space-between; gap: 4px;
    padding: 4px 6px; border-radius: 6px; cursor: pointer;
}
.kr-tree-row:hover { background: rgba(128, 128, 128, 0.14); }
.kr-tree-row.selected { background: rgba(98, 130, 255, 0.22); }

.kr-ruler { position: relative; height: 18px; background: #fafbfc; border: 1px solid #d8dce1; border-bottom: none; }
.kr-ruler-tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid #c7ccd3; font-size: 9px; color: #8a93a0; padding-left: 2px; line-height: 18px; }
.kr-vruler { position: relative; width: 18px; background: #fafbfc; border: 1px solid #d8dce1; border-right: none; flex-shrink: 0; }
.kr-vruler-tick { position: absolute; left: 0; right: 0; border-top: 1px solid #c7ccd3; font-size: 9px; color: #8a93a0; padding-left: 2px; }

/* FASE 5 (UI v5, "que la parte de diseno se vea asi... rediseno completo: pagina entera
   apilada"): el tab Diseno paso de mostrar UNA banda a la vez a mostrar TODAS las bandas
   apiladas en una sola hoja (estilo SSRS/Visual Studio Report Designer), cada banda como una
   fila de este flex column. PageFooter se fija abajo del todo de la hoja con margin-top:auto
   (unico truco necesario -- en un contenedor flex-column, un item con margin-top:auto empuja a
   si mismo y a lo que venga despues hasta el fondo del contenedor, sin necesitar un spacer
   aparte). */
.kr-band-row { flex-shrink: 0; }
.kr-band-label {
    font-size: 9px; color: #8a93a0; background: #fafbfc; padding: 1px 4px;
    border-bottom: 1px dashed #d8dce1; cursor: pointer; user-select: none;
}
.kr-band-row.selected .kr-band-label { background: rgba(25, 118, 210, .18); color: #1976d2; }
.kr-band-placeholder { color: #9aa3ad; font-size: 12px; font-style: italic; padding: 6px 8px; pointer-events: none; }

/* FASE 5 (UI v5, "ves como separa las secciones encabezado cuerpo y pie... se puede desplazar
   el alto de la cabeza y el pie"): linea punteada visible en el limite de cada banda (misma
   idea visual que la captura de referencia), que ADEMAS es el handle para arrastrar
   band.Height -- el area de agarre real (7px) es mas alta que la linea que se ve (1px) para
   que sea comodo apuntarle con el mouse sin verse gruesa.
   FIX (mismo dia, "quiero usar 100% el espacio de cada banda... para el marquee"): este handle
   se solapa con la banda de ARRIBA (margin-top negativo) para que la linea punteada quede
   pegada al borde -- ese solape le robaba parte del area util del lienzo de la banda para
   arrancar el marquee de seleccion multiple (OnBandCanvasMouseDown), porque el handle tiene
   z-index mas alto y gana el mousedown ahi. Se achico el solape de 4px a 2px (menos terreno
   robado, la linea punteada se corre ~2px pero sigue practicamente pegada al borde, no se nota
   a simple vista) -- no se saco del todo porque un handle sin nada de solape se vuelve
   incomodo de agarrar con precision para redimensionar. */
.kr-band-resize-handle {
    height: 7px; margin-top: -2px; position: relative; z-index: 1;
    cursor: ns-resize; display: flex; align-items: center;
}
.kr-band-resize-handle::after { content: ""; display: block; width: 100%; border-bottom: 1px dashed #b6bcc4; }
.kr-band-resize-handle:hover::after { border-bottom: 2px solid #1976d2; }

/* FIX (mismo dia, video de referencia: "en el pie de pagina... la linea de abajo que es
   punteada quitala"): la banda que se dibuja al final (normalmente Pie de pagina) no tiene otra
   banda debajo, asi que esa linea punteada no marca ningun limite real  solo la linea negra de
   kr-zone-divider, ANTES del pie, tiene sentido ahi. Se le saca el ::after a esta instancia
   puntual (ver bandType == lastPresentBandType en el foreach de bandas); el arrastre en si
   (band.Height del pie) se mantiene funcional, solo se le saco la marca visual. */
.kr-band-resize-handle--last::after { content: none; }
.kr-band-resize-handle--last:hover::after { content: none; }

/* FIX (mismo dia, "arriba del footer me volvio a aparecer la linea punteada... yo solo quiero
   usar la linea negra para desplazar el pie"): a diferencia de --last (que solo saca la linea
   visual pero deja el arrastre activo, porque ahi no hay nada mas que lo reemplace), esta
   instancia (el handle propio de Detail, justo arriba de la linea negra draggable de
   kr-zone-divider--draggable) es 100% redundante -- se le saca la linea Y la interaccion
   (pointer-events:none) para que el unico lugar donde se puede agarrar sea la linea negra. */
.kr-band-resize-handle--superseded { pointer-events: none; }
.kr-band-resize-handle--superseded::after { content: none; }

/* FASE 5 (UI v5, "las lineas de separacion entre encabezado cuerpo y pie... esas dos lineas
   negras en la imagen"): linea solida (no punteada) antes y despues de Detail -- marca las 3
   zonas grandes del reporte, igual que la captura de referencia. flex-shrink:0 para que no se
   la coma el flex-column si el contenido de las bandas es mas alto que la hoja.
   FIX (mismo dia, "la barra debe parar en los label no encimarlo"): el resize-handle de la
   banda anterior tenia margin-bottom negativo que tiraba esta linea (y la kr-band-label de la
   banda siguiente) hacia arriba, encimando el label de "Detalle" con la linea negra -- se saco
   ese margin-bottom negativo de .kr-band-resize-handle y se le dio a esta linea un margin-bottom
   chico (2px) para que quede un respiro limpio antes del label de abajo, sin overlap. */
/* FIX (mismo dia, "que las lineas negras ocupen el ancho completo de la pagina y se conviertan
   en lineas punteadas mas finas"): 1px dashed en vez de 2px solid -- el ancho completo (de borde
   a borde de la hoja, no solo el area imprimible) se resuelve con margin-left/width INLINE en el
   markup de cada linea (dependen de PageWidth/MarginLeft en tiempo de ejecucion, no se pueden
   fijar aca en el style estatico). */
.kr-zone-divider { height: 0; border-top: 1px dashed #000000; flex-shrink: 0; margin-bottom: 2px; }

/* FIX (mismo dia, "la linea negra del pie no la puedo desplazar"): area de agarre real un poco
   mas alta que el propio borde (mismo truco que kr-band-resize-handle, comodo para apuntarle con
   el mouse) + resaltado celeste SOLIDO al pasar el mouse, para que se note que ESTA linea (no
   solo el handle punteado de arriba) tambien arrastra el alto de Detalle. */
.kr-zone-divider--draggable { cursor: ns-resize; padding: 3px 0; margin-top: -3px; user-select: none; }
.kr-zone-divider--draggable:hover { border-top: 2px solid #1976d2; }

/* Menu contextual (click derecho sobre un control del Editor visual) -- div propio, no hay
   componente de MudBlazor para esto. z-index alto porque flota sobre el lienzo y el resto de
   la pagina; el overlay invisible detras cierra el menu al clickear afuera. */
.kr-context-overlay { position: fixed; inset: 0; z-index: 1200; }
.kr-context-menu {
    position: fixed; z-index: 1201; min-width: 170px; padding: 4px 0;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px; box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
.kr-context-header { padding: 6px 14px 2px; font-size: 11px; color: var(--mud-palette-text-secondary); text-transform: uppercase; }
.kr-context-item { padding: 8px 14px; font-size: 14px; cursor: pointer; display: flex; align-items: center; }
.kr-context-item:hover { background: rgba(128, 128, 128, 0.16); }
.kr-context-item.disabled { opacity: .45; cursor: default; pointer-events: none; }
.kr-context-divider { height: 1px; background: var(--mud-palette-lines-default); margin: 4px 0; }

/* FASE 6 (2026-07-19, pestaña "Número" del dialog de Propiedades -- ver video de referencia SSRS:
   listas "Categoría"/"Tipo" en cajas con borde, scrolleables, item activo resaltado en azul).
   kr-format-listbox es el contenedor con borde/scroll; kr-format-listbox-item cada fila --
   mismo criterio visual que kr-context-item (hover tenue) pero con un estado ".selected" propio
   (a diferencia del menu contextual, esta lista vive siempre visible dentro del dialog, no es un
   flyout hover-only). */
.kr-format-listbox {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    max-height: 190px;
    overflow-y: auto;
    background: var(--mud-palette-surface);
}
.kr-format-listbox-item { padding: 5px 10px; font-size: 13px; cursor: pointer; }
.kr-format-listbox-item:hover { background: rgba(128, 128, 128, 0.16); }
.kr-format-listbox-item.selected { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }

/* FASE 6c (2026-07-20, "hacemos los graficos"): tarjetas del dialog "Seleccionar tipo de
   grafico" (ReportChartTypeDialog.razor) -- version simplificada de la galeria de SSRS, 3
   opciones grandes en vez de una grilla de miniaturas por categoria. */
.kr-chart-type-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    padding: 16px 8px; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px;
    cursor: pointer; text-align: center;
}
.kr-chart-type-card:hover { background: rgba(128, 128, 128, 0.10); }
.kr-chart-type-card.selected { border-color: var(--mud-palette-primary); background: rgba(25, 118, 210, 0.10); }

/* Submenu "Insertar" (hover hacia la derecha, mismo patron que un menu contextual nativo) --
   kr-context-submenu-wrapper es position:relative para anclar el flyout con left:100%. Solo
   CSS, sin estado en C#: kr-context-submenu-wrapper:hover muestra kr-context-submenu. */
.kr-context-submenu-wrapper { position: relative; }
.kr-context-submenu-trigger { justify-content: space-between; }
.kr-context-submenu {
    display: none; position: absolute; top: -4px; left: 100%; min-width: 170px; padding: 4px 0;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px; box-shadow: 0 4px 18px rgba(0,0,0,.35);
    z-index: 1202;
}
.kr-context-submenu-wrapper:hover .kr-context-submenu { display: block; }

/* FASE 5 (UI v4, "que parezca a la misma altura que Diseno y Vista previa y que cuando
   aparezca desplace a la derecha"): "Estructura del reporte" dejo de ser un overlay flotante
   (v3) -- ahora es una columna mas del mismo flex row que Diseno/Vista previa (mismo top,
   mismo alto natural de la fila), que EMPUJA el contenido de al lado al aparecer en vez de
   taparlo. El "slide" es el ancho del contenedor exterior animando de 0 a 320px (no
   position:fixed/transform); el div interior tiene el ancho final fijo para que el contenido
   no se reacomode feo durante la transicion. */
.kr-structure-panel { flex-shrink: 0; width: 0; overflow: hidden; transition: width .2s ease; }
.kr-structure-panel.open { width: 320px; }

/* FIX (mismo dia, "quitar ese espacio a la derecha del cuadro de herramientas... dejale un
   pequeno margen"): el panel de Herramientas comparte esta misma clase con Estructura del
   reporte, pero su contenido interno es mas angosto (width:220px, ver mas abajo) que el ancho
   fijo compartido (320px) -- esos 100px de diferencia quedaban como espacio muerto a la derecha
   del recuadro. Este modificador achica el ancho SOLO para Herramientas sin tocar Estructura,
   que si necesita los 320px completos.
   FIX (mismo dia, "dejalo a la mitad de lo que esta ahora"): 240px -> 120px (y el contenido
   interno de 220px -> 110px, mas abajo), a pedido explicito -- el texto de cada item envuelve a
   2 lineas si hace falta (kr-context-item no tiene white-space:nowrap), no se corta contenido.
   FIX (mismo dia, "hacelo mas ancho el doble"): 120px -> 240px (vuelve al ancho original de
   antes del pedido de arriba -- el contenido interno tambien vuelve a 220px, mas abajo). */
.kr-structure-panel--narrow.open { width: 240px; }

/* FIX (mismo dia, "agregar la posibilidad de que sea flotante tocando alguna tilde... y lo
   pueda arrastrar"): cuando el cuadro de herramientas se convierte en flotante (_toolboxFloating,
   ver code), se saca del flujo del flex row y se dibuja aparte con position:fixed en
   _toolboxX/_toolboxY -- mismo z-index que el menu contextual (kr-context-menu) para que flote
   por encima de todo el lienzo. La tira de arrastre (icono DragIndicator) usa el mismo patron de
   mousedown que ya usan los handles de banda/pagina -- onmousedown dispara OnToolboxDragStart,
   que activa un overlay invisible de pantalla completa (kr-context-overlay, ya existente) para
   capturar el mousemove/mouseup aunque el cursor se vaya lejos del panelito chico mientras se
   arrastra rapido. */
.kr-toolbox-floating { position: fixed; z-index: 1201; width: 260px; box-shadow: 0 4px 18px rgba(0,0,0,.35); border-radius: 8px; }
.kr-toolbox-drag-handle { cursor: move; }

/* FIX (mismo dia, "el movimiento al arrastrar no es fluido"): el overlay de pantalla completa
   (kr-context-overlay, z-index:1200) queda POR DEBAJO del panel flotante (z-index:1201) -- mientras
   el cursor esta sobre el panel mismo (caso comun: arrastras desde la tira, que esta DENTRO del
   panel), es el panel el que se queda con los eventos de mouse, no el overlay de abajo, asi que el
   mousemove no llegaba a OnToolboxDragMove en cada frame -- solo cuando el cursor salia del panel,
   de ahi el salto/entrecortado. Con pointer-events:none en el panel mientras se arrastra, TODOS los
   eventos de mouse atraviesan directo al overlay (que si los captura en cada frame), sin importar
   si el cursor esta arriba del panel o no. Se le vuelve a poner "auto" al soltar (OnToolboxDragEnd)
   para que los botones/items del panel sigan siendo clickeables en reposo. */
.kr-toolbox-floating--dragging { pointer-events: none; }

/* Paleta flotante de datos. Se mantiene visible mientras se arrastran campos al lienzo, como
   las ventanas de herramientas de los diseñadores de reportes de escritorio. */
.kr-data-panel-floating {
    position: fixed;
    z-index: 1201;
    width: min(360px, calc(100vw - 24px));
    max-height: calc(100vh - var(--mud-appbar-height) - 64px);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0,0,0,.38);
}
.kr-data-panel-floating > .mud-paper {
    max-height: inherit;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.kr-data-panel-floating--dragging { pointer-events: none; }
.kr-floating-panel-drag-overlay { cursor: move; }
.kr-floating-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: move;
    user-select: none;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding-bottom: 6px;
}
.kr-data-fields-scroll {
    max-height: min(480px, calc(100vh - var(--mud-appbar-height) - 260px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 2px;
}
.kr-data-field {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: default;
    user-select: none;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.kr-data-field:hover {
    color: var(--mud-palette-primary);
    background: rgba(25,118,210,.18);
    border-color: rgba(25,118,210,.55);
    cursor: grab;
}
.kr-data-field.kr-data-field--dragging {
    color: var(--mud-palette-primary);
    background: rgba(25,118,210,.28);
    border-color: var(--mud-palette-primary);
    cursor: grabbing;
}
.kr-data-field:active { cursor: grabbing; }
.kr-data-field-text {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.kr-data-field-text span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kr-data-field-text small {
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Selección estilo diseñador de escritorio: ocho tiradores alrededor del objeto y un indicador
   de cuatro flechas que deja claro que el cuerpo completo sirve para moverlo. */
.kr-control-selection-adorners {
    position: absolute;
    inset: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 5;
}
.kr-control-move-indicator {
    position: absolute !important;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px !important;
    height: 16px !important;
    padding: 1px;
    color: #0d47a1;
    background: #fff;
    border: 1px solid #1976d2;
    border-radius: 2px;
    pointer-events: none;
}
.kr-control-selection-handle {
    position: absolute;
    width: 7px;
    height: 7px;
    background: #fff;
    border: 1px solid #111;
    box-sizing: border-box;
    pointer-events: auto;
}
.kr-control-selection-handle--nw { left: -4px; top: -4px; cursor: nwse-resize; }
.kr-control-selection-handle--n  { left: 50%; top: -4px; transform: translateX(-50%); cursor: ns-resize; }
.kr-control-selection-handle--ne { right: -4px; top: -4px; cursor: nesw-resize; }
.kr-control-selection-handle--e  { right: -4px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.kr-control-selection-handle--se { right: -4px; bottom: -4px; cursor: nwse-resize; }
.kr-control-selection-handle--s  { left: 50%; bottom: -4px; transform: translateX(-50%); cursor: ns-resize; }
.kr-control-selection-handle--sw { left: -4px; bottom: -4px; cursor: nesw-resize; }
.kr-control-selection-handle--w  { left: -4px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }

/* Vista previa autorizada como ventana de trabajo. La geometría inicial se centra con CSS puro
   (sin transform de centrado, para que el puntero del resize no se separe de la esquina). JS mide
   exclusivamente .kr-app-header/.kr-app-footer y actualiza estas variables. */
.kr-preview-dialog-shell {
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    /* MudDialog conserva al finalizar su animación transform: scale(1). Aunque no cambia
       visualmente el tamaño, ese transform convierte a los descendientes position:fixed en
       relativos al diálogo centrado. La ventana debe posicionarse contra el viewport real. */
    animation: none !important;
    -webkit-animation: none !important;
    transform: none !important;
}
.kr-preview-dialog-shell .mud-dialog-content {
    padding: 0 !important;
    overflow: visible !important;
}
.kr-preview-window {
    --kr-preview-offset-x: 0px;
    --kr-preview-offset-y: 0px;
    --kr-preview-area-top: var(--mud-appbar-height, 64px);
    --kr-preview-area-bottom: 44px;
    --kr-preview-width: min(1320px, calc(100vw - 48px));
    --kr-preview-height: min(760px, calc(100vh - var(--kr-preview-area-top) - var(--kr-preview-area-bottom) - 24px));
    position: fixed;
    z-index: 1301;
    left: max(24px, calc(50vw - 660px));
    top: calc(var(--kr-preview-area-top) + 12px);
    width: var(--kr-preview-width);
    height: var(--kr-preview-height);
    transform: translate(var(--kr-preview-offset-x), var(--kr-preview-offset-y));
    display: flex;
    flex-direction: column;
    min-width: min(680px, 92vw);
    min-height: min(420px, calc(100vh - var(--kr-preview-area-top) - var(--kr-preview-area-bottom)));
    box-sizing: border-box;
    overflow: hidden;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    box-shadow: 0 18px 60px rgba(0,0,0,.48);
}
.kr-preview-window--maximized {
    left: 0 !important;
    top: var(--kr-preview-area-top) !important;
    right: 0 !important;
    bottom: var(--kr-preview-area-bottom) !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    min-width: 0;
    min-height: 0;
    transform: none !important;
    border-radius: 0;
}
.kr-preview-window--dragging,
.kr-preview-window--resizing {
    user-select: none;
    will-change: transform;
}
.kr-preview-window-header {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
    padding: 6px 10px 6px 16px;
    cursor: move;
    user-select: none;
    touch-action: none;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.kr-preview-window--maximized .kr-preview-window-header { cursor: default; }
.kr-preview-window--maximized .kr-preview-resize-handle { display: none; }
.kr-preview-window-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kr-preview-window-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 12px;
    background: var(--mud-palette-background);
}
.kr-preview-resize-handle {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
    touch-action: none;
}
.kr-preview-resize-handle::after {
    content: "";
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--mud-palette-text-secondary);
    border-bottom: 2px solid var(--mud-palette-text-secondary);
    opacity: .65;
    pointer-events: none;
}

/* Selector de impresora MAUI: usa la misma mecánica de ventana flotante que la vista previa,
   pero con una geometría compacta y sin volver a renderizar el documento. */
.kr-print-window {
    --kr-preview-width: min(560px, calc(100vw - 32px));
    --kr-preview-height: auto;
    left: max(16px, calc(50vw - 280px));
    width: var(--kr-preview-width);
    height: auto;
    max-height: calc(100vh - var(--kr-preview-area-top) - var(--kr-preview-area-bottom) - 24px);
    min-width: min(420px, calc(100vw - 32px));
    min-height: 420px;
    z-index: 1302;
}
.kr-print-window-body {
    padding: 18px 20px 12px;
    background: var(--mud-palette-surface);
}
.kr-print-window-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    padding: 12px 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}
@media (max-width: 720px) {
    .kr-preview-window {
        left: 0;
        top: var(--kr-preview-area-top);
        width: 100vw;
        height: calc(100vh - var(--kr-preview-area-top) - var(--kr-preview-area-bottom));
        min-width: 0;
        min-height: 0;
        transform: none;
        border-radius: 0;
    }
    .kr-preview-resize-handle { display: none; }
    .kr-print-window {
        left: 8px;
        top: calc(var(--kr-preview-area-top) + 8px);
        width: calc(100vw - 16px);
        height: auto;
        min-height: 0;
        max-height: calc(100vh - var(--kr-preview-area-top) - var(--kr-preview-area-bottom) - 16px);
        border-radius: 8px;
    }
}