/* ============================================================ IO Admin — override de paleta Syncfusion Material 3 Debe cargarse DESPUÉS de material3.css (último de index.html), si no, el morado default de M3 pisa estos valores. Formato RGB por comas (así lo exige M3; hex NO funciona aquí). Un solo lugar: cambia --color-sf-primary y aplica a TODOS los componentes Syncfusion (botones, grids, inputs, tabs, etc.). ============================================================ */ /* ── Tema claro ── */ :root { /* Principal / acento = naranja de marca #f39d1c */ --color-sf-primary: 243, 157, 28; --color-sf-on-primary: 36, 23, 4; /* texto sobre naranja (--on-brand) */ --color-sf-primary-container: 253, 241, 222; /* --brand-soft */ --color-sf-on-primary-container: 36, 23, 4; --color-sf-surface-tint-color: 243, 157, 28; --color-sf-inverse-primary: 201, 121, 10; /* --brand-strong */ /* Secundario = gris frío (quita el tinte morado del default M3) */ --color-sf-secondary: 88, 97, 112; /* --text-2 */ --color-sf-on-secondary: 255, 255, 255; --color-sf-secondary-container: 238, 241, 245; /* --surface-2 */ --color-sf-on-secondary-container: 26, 32, 40; /* --text */ } /* ── Tema oscuro (Syncfusion lo activa con .e-dark-mode en ) ── */ .e-dark-mode { --color-sf-primary: 247, 167, 46; /* --brand (dark) #f7a72e */ --color-sf-on-primary: 36, 23, 4; --color-sf-primary-container: 43, 33, 19; /* --brand-soft (dark) #2b2113 */ --color-sf-on-primary-container: 247, 167, 46; --color-sf-surface-tint-color: 247, 167, 46; --color-sf-inverse-primary: 201, 121, 10; --color-sf-secondary: 162, 172, 186; /* --text-2 (dark) */ --color-sf-on-secondary: 20, 24, 30; --color-sf-secondary-container: 28, 34, 42; /* --surface-2 (dark) #1c222a */ --color-sf-on-secondary-container: 233, 237, 242; /* --text (dark) */ } /* ============================================================ Grid (e-grid) — hover de fila legible en claro y oscuro M3 pinta el hover con rgba(var(--color-sf-secondary-container)) !important; ese valor puede quedar demasiado claro en oscuro (texto ilegible). Forzamos fondo Y texto con nuestros tokens, que siguen data-theme de forma fiable. El prefijo :root eleva la especificidad para ganarle al !important de M3. ============================================================ */ :root .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) { background-color: var(--surface-2) !important; color: var(--text) !important; } /* ── Fila seleccionada (checkbox o clic) ────────────────────────────────── M3 la pinta con rgba(--color-sf-primary-container, .65) y el texto con --color-sf-on-surface-variant: en oscuro queda un lavanda claro con letra clara encima (ilegible) y en claro es morado, ajeno a la marca. Se fuerza el naranja tenue de marca + texto normal, que ya siguen data-theme. Se cubren las tres marcas que usa el grid (td.e-active, e-selectionbackground y la clase a nivel de fila) porque cambian según el modo de selección. */ :root .e-grid td.e-active, :root .e-grid td.e-active .e-icons, :root .e-grid .e-rowcell.e-selectionbackground, :root .e-grid .e-rowcell.e-cellselectionbackground, :root .e-grid tr.e-row.e-active > .e-rowcell, :root .e-grid tr.e-row.e-selectionbackground > .e-rowcell { background: var(--brand-soft) !important; color: var(--text) !important; } /* Hover sobre una fila YA seleccionada: mismo naranja, un punto más marcado, para que se distinga del hover normal sin perder legibilidad. Si el navegador no soporta color-mix, la declaración se ignora y queda el naranja tenue de la regla de arriba: legible igual. */ :root .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover td.e-active, :root .e-grid.e-gridhover tr.e-row.e-active:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover > .e-rowcell { background: color-mix(in srgb, var(--brand-soft) 82%, var(--brand)) !important; color: var(--text) !important; } /* ============================================================ Texto en color de marca sobre fondo claro Los botones planos primarios (.e-flat.e-primary) y la pestaña activa pintan el TEXTO con --color-sf-primary = naranja #f39d1c: sobre blanco da 2.18:1, ilegible. Se pasan a --brand-ink, que sí cambia con el tema (en oscuro es #ffb849). El !important y la cadena con .e-tab-header son necesarios: la regla de Syncfusion trae 6 clases y le ganaba en especificidad a una más corta. Ojo: solo se toca el color del TEXTO; los botones RELLENOS siguen con el naranja de marca y su --on-brand encima, que ya cumple. ============================================================ */ :root .e-btn.e-flat.e-primary, :root .e-btn.e-flat.e-primary:hover, :root .e-btn.e-flat.e-primary:focus, :root .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text, :root .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon, :root .e-tab .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-text, :root .e-tab .e-tab-header .e-toolbar-item.e-active.e-iright .e-tab-text { color: var(--brand-ink) !important; }