/*
* Adaptador de Radzen.Blazor 7.1.3 (tema "material") → tokens de Clean OS.
*
* Radzen 7.1.3 SÍ soporta re-tematizado por variables CSS: su tema "material"
* define ~2000 variables --rz-* en :root, y casi todos los componentes
* (RadzenCard, RadzenButton, RadzenTextBox, RadzenDataGrid, RadzenDialog,
* RadzenPanelMenu...) leen de una cadena de ~60 variables base/semánticas
* (confirmado leyendo material-base.css línea a línea, no adivinado). Este
* archivo sobrescribe esas ~60 y deja que la cascada haga el resto — no
* toca ningún .razor.
*
* Debe cargar DESPUÉS de en el
* de App.razor (gana por orden de cascada, misma especificidad, sin
* !important).
*
* Tres roles del acento (regla 4.1 de Clean OS) mapeados a través de la
* dualidad primary/secondary que ya trae Radzen:
* --rz-primary → relleno (accent-solid): botones, switches, checks
* --rz-secondary → trazo (accent): indicador activo del menú, igual que
* .menu-item.activo { box-shadow: inset 3px 0 0 var(--accent) }
* del propio sistema
* --rz-link-* → texto en acento (text-link), sobrescrito directo
*/
:root {
/* ---- Escala neutra (--rz-base*) → tokens/colors.css neutral-* ---- */
--rz-white: var(--surface);
--rz-black: var(--neutral-900);
--rz-base: var(--neutral-200);
--rz-base-50: var(--neutral-50);
--rz-base-100: var(--neutral-100);
--rz-base-200: var(--neutral-200);
--rz-base-300: var(--neutral-300);
--rz-base-400: var(--neutral-400);
--rz-base-500: var(--neutral-500);
--rz-base-600: var(--neutral-600);
--rz-base-700: var(--neutral-700);
--rz-base-800: var(--neutral-800);
--rz-base-900: var(--neutral-900);
--rz-base-light: var(--neutral-100);
--rz-base-lighter: var(--neutral-0);
--rz-base-dark: var(--neutral-600);
--rz-base-darker: var(--neutral-900);
--rz-base-background-color: var(--surface);
--rz-body-background-color: var(--background);
/* ---- Primario = rol RELLENO (accent-solid) ---- */
--rz-primary: var(--accent-solid);
--rz-primary-light: var(--accent-solid-hover);
--rz-primary-lighter: var(--accent-soft);
--rz-primary-dark: var(--accent-solid-press);
--rz-primary-darker: var(--accent-press);
--rz-on-primary: var(--accent-on-solid);
--rz-on-primary-light: var(--accent-on-solid);
--rz-on-primary-lighter: var(--accent-on-soft);
--rz-on-primary-dark: var(--accent-on-solid);
--rz-on-primary-darker: var(--accent-on-solid);
/* ---- Secundario = rol TRAZO (accent), no un color de marca aparte ---- */
--rz-secondary: var(--accent);
--rz-secondary-light: var(--accent-hover);
--rz-secondary-lighter: var(--accent-soft);
--rz-secondary-dark: var(--accent-press);
--rz-secondary-darker: var(--accent-press);
--rz-on-secondary: var(--accent-on-solid);
--rz-on-secondary-light: var(--accent-on-solid);
--rz-on-secondary-lighter: var(--accent-on-soft);
--rz-on-secondary-dark: var(--accent-on-solid);
--rz-on-secondary-darker: var(--accent-on-solid);
/* ---- Semánticos: 1:1 con Clean OS ---- */
--rz-info: var(--info-solid);
--rz-info-light: var(--info-solid);
--rz-info-lighter: var(--info-soft);
--rz-info-dark: var(--info-text);
--rz-info-darker: var(--info-text);
--rz-on-info-lighter: var(--info-text);
--rz-success: var(--success-solid);
--rz-success-light: var(--success-solid);
--rz-success-lighter: var(--success-soft);
--rz-success-dark: var(--success-text);
--rz-success-darker: var(--success-text);
--rz-on-success-lighter: var(--success-text);
--rz-warning: var(--warning-solid);
--rz-warning-light: var(--warning-solid);
--rz-warning-lighter: var(--warning-soft);
--rz-warning-dark: var(--warning-text);
--rz-warning-darker: var(--warning-text);
--rz-on-warning-lighter: var(--warning-text);
--rz-danger: var(--danger-solid);
--rz-danger-light: var(--danger-solid);
--rz-danger-lighter: var(--danger-soft);
--rz-danger-dark: var(--danger-text);
--rz-danger-darker: var(--danger-text);
--rz-on-danger-lighter: var(--danger-text);
/* ---- Rampa de series (gráficos) → tokens/colors.css --serie-* ---- */
--rz-series-1: var(--serie-1);
--rz-series-2: var(--serie-2);
--rz-series-3: var(--serie-3);
--rz-series-4: var(--serie-4);
--rz-series-5: var(--serie-resto);
--rz-series-6: var(--serie-resto);
--rz-series-7: var(--serie-resto);
--rz-series-8: var(--serie-resto);
/* ---- Texto y tipografía ---- */
--rz-text-title-color: var(--text-primary);
--rz-text-color: var(--text-primary);
--rz-text-secondary-color: var(--text-secondary);
--rz-text-tertiary-color: var(--text-tertiary);
--rz-text-disabled-color: var(--text-tertiary);
--rz-text-contrast-color: var(--text-inverse);
--rz-text-font-family: var(--font-sans);
--rz-link-color: var(--text-link);
--rz-link-hover-color: var(--text-link-hover);
/* ---- Radios: una sola forma, como pide el sistema ---- */
--rz-border-radius: var(--radius);
/* ---- Trazo (borde/foco) = rol TRAZO, no el relleno del primario ---- */
--rz-outline-color: var(--accent);
--rz-border-focus: var(--border-width) solid var(--accent);
--rz-input-focus-border: var(--border-width) solid var(--accent);
/* El anillo va por fuera, no un borde interior de 1px (regla de Campo/6.2) */
--rz-input-focus-shadow: var(--focus-ring);
/* ---- Elevación: sin sombra en la hoja, solo en lo que flota ----
(regla 4.9/4.10). shadow-4/6/9/10 son los que de verdad usan
popups/dropdowns/diálogos/menú contextual; el resto (tarjetas,
botones, inputs, acordeón) se apoya en el papel, sin sombra. */
--rz-shadow-0: none;
--rz-shadow-1: none;
--rz-shadow-2: none;
--rz-shadow-3: none;
--rz-shadow-4: var(--shadow-md);
--rz-shadow-5: var(--shadow-md);
--rz-shadow-6: var(--shadow-lg);
--rz-shadow-7: var(--shadow-lg);
--rz-shadow-8: var(--shadow-lg);
--rz-shadow-9: var(--shadow-dialog);
--rz-shadow-10: var(--shadow-dialog);
/* El botón no se hunde al presionar (4.9: "no reponer sombra para
jerarquizar"), aunque ambos comparten --rz-shadow-6 con el menú
contextual (que sí necesita sombra por flotar). */
--rz-button-active-shadow: none;
--rz-button-hover-shadow: none;
--rz-button-focus-shadow: var(--focus-ring);
/* ---- Iconos: Material Symbols Rounded (cargada en App.razor) ---- */
--rz-icon-font-family: "Material Symbols Rounded";
/* ---- RadzenDataGrid: lo que más se ve en cada módulo. Cabecera overline
sobre superficie hundida, cerrada con filete de 2px en tinta (regla
"listados" del sistema); filas con filete simple; hover en
surface-hover. La densidad Compact de Radzen ya trae su propio padding
4/8px vía .rz-density-compact -- coincide con la escala del sistema,
no hace falta pelearle. */
--rz-grid-header-background-color: var(--surface-secondary);
--rz-grid-header-color: var(--text-secondary);
--rz-grid-header-font-size: var(--text-overline-size);
--rz-grid-header-font-weight: var(--text-overline-weight);
--rz-grid-header-text-transform: uppercase;
/* Filete simple, no la tinta de 2px: la banda hundida de la cabecera ya
separa por sí sola, y una regla negra sobre cada tabla de la app suma
peso donde el pedido es justamente aligerar. La tinta queda reservada
para cerrar un total. */
--rz-grid-header-cell-border-bottom: var(--border-width) solid var(--border);
--rz-grid-header-sorted-background-color: var(--surface-active);
--rz-grid-cell-border: var(--border-width) solid var(--border);
--rz-grid-bottom-cell-border: var(--border-width) solid var(--border);
--rz-grid-right-cell-border: none;
--rz-grid-cell-color: var(--text-primary);
--rz-grid-cell-font-size: var(--text-small-size);
--rz-grid-hover-background-color: var(--surface-hover);
--rz-grid-hover-color: var(--text-primary);
/* Fila alterna: Radzen la saca de --rz-base-50 → --neutral-50 (#FAFAF8), un
blanco roto de tinte CÁLIDO. Al lado de la banda azul fría de la cabecera
ese calor se lee directamente como amarillo. Va a su propio token, que
es la misma banda pero susurrada, y que además tiene versión oscura. */
--rz-grid-stripe-background-color: var(--surface-stripe);
--rz-grid-stripe-odd-background-color: var(--surface);
--rz-grid-toolbar-background-color: var(--surface);
--rz-grid-filter-background-color: var(--surface);
--rz-grid-filter-color: var(--text-tertiary);
--rz-grid-filter-focus-color: var(--accent);
--rz-grid-foot-background-color: var(--surface-secondary);
--rz-grid-foot-cell-color: var(--text-primary);
/* Columna congelada (las dos primeras y la de acciones en Productos): su
fondo tiene que ser opaco, si no las celdas que pasan por debajo al
scrollear en horizontal se transparentan encima. */
--rz-grid-frozen-cell-background-color: var(--surface);
--rz-grid-frozen-cell-border: var(--border-width) solid var(--border);
}
.rz-data-grid .rz-column-title {
letter-spacing: var(--text-overline-ls);
}
/* --- Composición de la cabecera ---
*
* NOTA: aquí hubo un intento de quitar el padding-inline-start que Radzen pone
* en el título de toda columna ordenable. Estaba mal leído: en columnas
* centradas o alineadas a la derecha ese relleno COMPENSA el icono de orden que
* va al final, para que el texto quede realmente centrado. Quitarlo en todas
* por igual desalineaba esas columnas. Se deja como viene de Radzen hasta poder
* mirar el encabezado renderizado.
*
* Lo que sí queda corregido:
* - El icono de filtro venía a 14px al lado de una etiqueta de 12px en
* versalita: pesaba más que el texto al que pertenece.
* - En densidad compacta la banda dejaba 4px arriba y abajo, así que la
* versalita quedaba casi tocando el filete. */
.rz-data-grid {
--rz-grid-filter-icon-font-size: var(--text-caption-size);
--rz-grid-filter-icon-width: 1rem;
--rz-grid-filter-icon-height: 1rem;
}
/* El icono de filtro se apaga en reposo y toma el acento cuando vas a usarlo:
en una cabecera de siete columnas, siete iconos a plena tinta compiten con
los propios títulos. */
.rz-data-grid .rz-cell-filter .rzi,
.rz-data-grid th .rzi-filter {
color: var(--text-tertiary);
transition: var(--transition-control);
}
.rz-data-grid th:hover .rzi-filter,
.rz-data-grid th .rzi-filter:focus-visible {
color: var(--accent);
}
/* Aire proporcionado a la versalita, sin abandonar la densidad compacta: la
banda pasa de ~24px a ~32px. Alcanza a Productos y al tablero, que son las
dos grillas compactas; los catálogos ya tienen la densidad por defecto. */
.rz-data-grid.rz-density-compact {
--rz-grid-header-cell-padding: var(--space-2) 0;
}
/* Una columna sin Width puede colapsar a 0px sin aviso: apenas una columna
de la grilla declara Width, Radzen fuerza table-layout:fixed en TODA la
tabla y reparte el resto sin avisar si el total ya desborda.
La excepción son las grillas con columnas bloqueadas (Productos). Radzen
scopea TODA su CSS de congelado bajo .rz-grid-table-fixed —el nombre de la
clase ya anuncia la dependencia— y calcula el desplazamiento left/right de
cada celda pegajosa a partir de los anchos DECLARADOS. Con table-layout
auto el navegador recalcula esos anchos según el contenido: los
desplazamientos dejan de cuadrar y las columnas congeladas se montan
encima de las que se desplazan en vez de quedar a su lado. Ahí tiene que
mandar el fixed de Radzen. */
.rz-data-grid .rz-grid-table-fixed:not(:has(.rz-frozen-cell, .rz-frozen-cell-left, .rz-frozen-cell-right)) {
table-layout: auto;
}
/* --- Fieldset ---
*
* Radzen deja el padding SUPERIOR en cero (`--rz-fieldset-padding: 0 1rem 1rem`)
* porque da por sentado que la leyenda ocupa ese renglón. Las pestañas de
* producto usan como simple recuadro, y sin leyenda
* Radzen no emite el