#blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } :root { font-size: var(--rz-root-font-size); } body { font-family: var(--rz-text-font-family); color: var(--rz-text-color); font-size: var(--rz-body-font-size); line-height: var(--rz-body-line-height); background-color: var(--rz-body-background-color); } .rz-body { --rz-body-padding: 0; } /* Cuando el sidebar está colapsado (data-attribute puesto en por window.setSidebar(), llamado desde MainLayout.razor.cs al togglear), forzamos: - el body a margin-left/padding-left 0 + ancho completo, anulando cualquier residuo del var(--rz-sidebar-width) que Radzen v10 no libere al togglear. - el sidebar a width 0 + sin padding/border para que no ocupe espacio en el layout flex aunque siga existiendo en el DOM (Radzen necesita el nodo para trackear el bind de Expanded). Usamos el atributo en en vez de class en RadzenLayout porque RadzenLayout v10 NO propaga atributos arbitrarios al root del DOM, entonces los selectores .end2-sidebar-closed nunca matcheaban nada. !important para vencer la especificidad alta de las reglas internas de Radzen. */ html[data-sidebar="closed"] .rz-body { margin-left: 0 !important; padding-left: 0 !important; width: 100% !important; max-width: 100% !important; } html[data-sidebar="closed"] .rz-sidebar { width: 0 !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; } /* Force los layout containers principales (Stack y Row) dentro del body a ocupar el 100% del padre. Radzen v10 los deja con width:auto y el stretch del flex no siempre aplica cuando los hijos tienen contenido intrínseco menor — el resultado son títulos y grids encogidos a su ancho natural en monitores grandes, dejando bandas vacías a la derecha (y a la izquierda cuando el sidebar se colapsa). Forzar width:100% + align-items:stretch garantiza que todo el contenido aproveche el ancho disponible. Scope: solo dentro de .rz-body para no romper layouts de diálogos o componentes con anchos intencionalmente pequeños. */ .rz-body .rz-stack { width: 100%; align-items: stretch; } .rz-body .rz-stack > .rz-row, .rz-body .rz-row { width: 100%; } a { color: var(--rz-link-color); } a:hover, a:focus { color: var(--rz-link-hover-color); } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .loading-progress { position: relative; display: block; width: 8rem; height: 8rem; margin: 20vh auto 1rem auto; } .loading-progress circle { fill: none; stroke: #e0e0e0; stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); } .loading-progress circle:last-child { stroke: #1b6ec2; stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; } .loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; } .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); } /* === Global UI tweaks ============================================== */ /* Tipografía global: stack del SO (más nítida que Roboto default en Windows). Segoe UI Variable Text en Win11, Segoe UI en Win10, -apple-system en macOS, system-ui como genérico. No hace falta cargar fuente externa. */ :root { --rz-text-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif; } /* Borde delicado en todos los RadzenDataGrid (visible en ot_1.png). */ .rz-data-grid { border: 1px solid rgba(0, 0, 0, 0.25) !important; border-radius: 4px; } /* Layout helper para tener toolbar de acciones a la derecha sobre la fila del pager (mismo renglón, lado opuesto — ver ot_5.png). Combinarlo con PagerPosition="PagerPosition.TopAndBottom" en el RadzenDataGrid. El grid se envuelve en .grid-scroll-inner para permitir scroll horizontal cuando hay muchas columnas (típico de child grids jerárquicos). El overlay queda ANCLADO al wrapper outer (.grid-with-overlay) que mantiene width 100% del espacio disponible — así los botones quedan visibles a la derecha aunque el usuario scrollee horizontalmente dentro del grid. */ .grid-with-overlay { position: relative; width: 100%; } .grid-actions-overlay { position: absolute; top: 0.35rem; right: 0.5rem; z-index: 10; } /* Variante "izquierda" del overlay de acciones — coloca los botones (Add + Menu) después de los 4 botones de navegación del pager top (|< < > >|). Pegado al borde izquierdo del grid; aunque el operador scrollee horizontalmente, los botones siguen visibles. Usado en TODOS los grids del proyecto (top-level y nested). Offset 12rem: - 4 botones nav × ~2rem cada uno = 8rem - Padding del pager-pages (~1rem) - Respiro visual entre el >| y el +: ~3rem Total ≈ 12rem. Es brittle si Radzen cambia el ancho del botón pero usar rem hace que escale con el A-/A+ del header. Si el tema apreta más los botones, podemos reducir; si los expande, aumentar. */ .grid-actions-overlay.grid-actions-left { left: 12rem; right: auto; } .grid-scroll-inner { overflow-x: auto; max-width: 100%; } /* Cuando .grid-with-overlay se renderiza DENTRO de un row expandido de otro RadzenDataGrid jerárquico (child grid), el TD del expand abarca todas las columnas del padre (potencialmente 2000+ px). Sin constrain, el wrapper del child hereda ese ancho y empuja el toolbar overlay off-screen. position:sticky con left:1rem + width viewport-relativa ancla el wrapper al área visible sin importar lo ancho que sea el TD padre. El buffer depende del estado del sidebar (clase puesta en RadzenLayout por MainLayout.razor.cs). Con sidebar abierto: ~280px sidebar + 60px padding = 340px. Con sidebar cerrado: solo el padding del card = 80px. */ .rz-expanded-row-template .grid-with-overlay { position: sticky; left: 1rem; } html[data-sidebar="open"] .rz-expanded-row-template .grid-with-overlay, .end2-sidebar-open .rz-expanded-row-template .grid-with-overlay { width: calc(100vw - 340px); max-width: calc(100vw - 340px); } html[data-sidebar="closed"] .rz-expanded-row-template .grid-with-overlay, .end2-sidebar-closed .rz-expanded-row-template .grid-with-overlay { width: calc(100vw - 80px); max-width: calc(100vw - 80px); } /* Las clases reales de Radzen son .rz-pager (NO .rz-paginator). Verificado inspeccionando el DOM real con devtools en localhost:5501/ots. */ .grid-with-overlay .rz-pager:first-of-type .rz-pager-summary, .grid-with-overlay .rz-pager:first-of-type .rz-dropdown, .grid-with-overlay .rz-pager:first-of-type .rz-pagesize-text { display: none !important; } /* Dentro de .rz-pager-pages hay con un