/*
 * Tokens del theme switcher (Shared/Components/ThemeSwitcher.razor + js/tema.js).
 *
 * Sin atributos data-tema-* en <html> no aplica nada: el sistema conserva sus colores actuales.
 *  - data-tema-primary : el color primario lo pone tema.js en línea (--tema-primary, --tema-primary-fg).
 *  - data-tema-neutro  : activa la escala de grises global --tema-n-* (solo modo oscuro).
 *  - data-tema-base    : zinc | slate | stone | gray | neutral | tinted. Solo colorea las tablas (--tema-b-*).
 *  - data-tema-mode    : dark.
 *  - data-tema-radius  : radio de los controles; el valor va en --tema-radius.
 * La capa que usa estos tokens es tema-generado.css (tools/tema/generar-tema.mjs).
 */

html[data-tema-primary] {
    --tema-acento: var(--tema-primary);
}

/* ---------- Escalas base (claro) ---------- */
html[data-tema-neutro] {
    --tema-n-0: #fff;
    --tema-n-1000: #000;
    /* zinc: base del modo oscuro con color base predeterminado */
    --tema-n-50: #fafafa; --tema-n-100: #f4f4f5; --tema-n-200: #e4e4e7; --tema-n-300: #d4d4d8; --tema-n-400: #a1a1aa;
    --tema-n-500: #71717a; --tema-n-600: #52525b; --tema-n-700: #3f3f46; --tema-n-800: #27272a; --tema-n-900: #18181b; --tema-n-950: #09090b;
}

/* ---------- Color base: solo de las tablas (--tema-b-*, claro) ---------- */
html[data-tema-base] {
    --tema-b-50: #fafafa; --tema-b-100: #f4f4f5; --tema-b-200: #e4e4e7; --tema-b-300: #d4d4d8; --tema-b-400: #a1a1aa; --tema-b-500: #71717a; --tema-b-600: #52525b; --tema-b-700: #3f3f46; --tema-b-800: #27272a; --tema-b-900: #18181b; --tema-b-950: #09090b;
}

html[data-tema-base="slate"] {
    --tema-b-50: #f8fafc; --tema-b-100: #f1f5f9; --tema-b-200: #e2e8f0; --tema-b-300: #cbd5e1; --tema-b-400: #94a3b8;
    --tema-b-500: #64748b; --tema-b-600: #475569; --tema-b-700: #334155; --tema-b-800: #1e293b; --tema-b-900: #0f172a; --tema-b-950: #020617;
}

html[data-tema-base="stone"] {
    --tema-b-50: #fafaf9; --tema-b-100: #f5f5f4; --tema-b-200: #e7e5e4; --tema-b-300: #d6d3d1; --tema-b-400: #a8a29e;
    --tema-b-500: #78716c; --tema-b-600: #57534e; --tema-b-700: #44403c; --tema-b-800: #292524; --tema-b-900: #1c1917; --tema-b-950: #0c0a09;
}

html[data-tema-base="gray"] {
    --tema-b-50: #f9fafb; --tema-b-100: #f3f4f6; --tema-b-200: #e5e7eb; --tema-b-300: #d1d5db; --tema-b-400: #9ca3af;
    --tema-b-500: #6b7280; --tema-b-600: #4b5563; --tema-b-700: #374151; --tema-b-800: #1f2937; --tema-b-900: #111827; --tema-b-950: #030712;
}

html[data-tema-base="neutral"] {
    --tema-b-50: #fafafa; --tema-b-100: #f5f5f5; --tema-b-200: #e5e5e5; --tema-b-300: #d4d4d4; --tema-b-400: #a3a3a3;
    --tema-b-500: #737373; --tema-b-600: #525252; --tema-b-700: #404040; --tema-b-800: #262626; --tema-b-900: #171717; --tema-b-950: #0a0a0a;
}

/* tinted: escala del color primario (mezclado con blanco o negro), no un gris teñido */
html[data-tema-base="tinted"] {
    --tema-b-50: color-mix(in srgb, var(--tema-primary, #007bff) 6%, #fff);
    --tema-b-100: color-mix(in srgb, var(--tema-primary, #007bff) 12%, #fff);
    --tema-b-200: color-mix(in srgb, var(--tema-primary, #007bff) 22%, #fff);
    --tema-b-300: color-mix(in srgb, var(--tema-primary, #007bff) 36%, #fff);
    --tema-b-400: color-mix(in srgb, var(--tema-primary, #007bff) 55%, #fff);
    --tema-b-500: color-mix(in srgb, var(--tema-primary, #007bff) 85%, #000);
    --tema-b-600: color-mix(in srgb, var(--tema-primary, #007bff) 75%, #000);
    --tema-b-700: color-mix(in srgb, var(--tema-primary, #007bff) 65%, #000);
    --tema-b-800: color-mix(in srgb, var(--tema-primary, #007bff) 55%, #000);
    --tema-b-900: color-mix(in srgb, var(--tema-primary, #007bff) 45%, #000);
    --tema-b-950: color-mix(in srgb, var(--tema-primary, #007bff) 35%, #000);
}

/* ---------- Modo oscuro: la escala se invierte (fondos claros -> oscuros, texto oscuro -> claro) ---------- */
html[data-tema-mode="dark"] {
    color-scheme: dark;
    --tema-o-50: #fafafa; --tema-o-100: #f4f4f5; --tema-o-200: #e4e4e7; --tema-o-300: #d4d4d8; --tema-o-400: #a1a1aa;
    --tema-o-500: #71717a; --tema-o-600: #52525b; --tema-o-700: #3f3f46; --tema-o-800: #27272a; --tema-o-900: #18181b; --tema-o-950: #09090b;
}

html[data-tema-mode="dark"][data-tema-base] {
    --tema-bo-50: #fafafa; --tema-bo-100: #f4f4f5; --tema-bo-200: #e4e4e7; --tema-bo-300: #d4d4d8; --tema-bo-400: #a1a1aa; --tema-bo-500: #71717a; --tema-bo-600: #52525b; --tema-bo-700: #3f3f46; --tema-bo-800: #27272a; --tema-bo-900: #18181b; --tema-bo-950: #09090b;
}

html[data-tema-mode="dark"][data-tema-base="slate"] {
    --tema-bo-50: #f8fafc; --tema-bo-100: #f1f5f9; --tema-bo-200: #e2e8f0; --tema-bo-300: #cbd5e1; --tema-bo-400: #94a3b8;
    --tema-bo-500: #64748b; --tema-bo-600: #475569; --tema-bo-700: #334155; --tema-bo-800: #1e293b; --tema-bo-900: #0f172a; --tema-bo-950: #020617;
}

html[data-tema-mode="dark"][data-tema-base="stone"] {
    --tema-bo-50: #fafaf9; --tema-bo-100: #f5f5f4; --tema-bo-200: #e7e5e4; --tema-bo-300: #d6d3d1; --tema-bo-400: #a8a29e;
    --tema-bo-500: #78716c; --tema-bo-600: #57534e; --tema-bo-700: #44403c; --tema-bo-800: #292524; --tema-bo-900: #1c1917; --tema-bo-950: #0c0a09;
}

html[data-tema-mode="dark"][data-tema-base="gray"] {
    --tema-bo-50: #f9fafb; --tema-bo-100: #f3f4f6; --tema-bo-200: #e5e7eb; --tema-bo-300: #d1d5db; --tema-bo-400: #9ca3af;
    --tema-bo-500: #6b7280; --tema-bo-600: #4b5563; --tema-bo-700: #374151; --tema-bo-800: #1f2937; --tema-bo-900: #111827; --tema-bo-950: #030712;
}

html[data-tema-mode="dark"][data-tema-base="neutral"] {
    --tema-bo-50: #fafafa; --tema-bo-100: #f5f5f5; --tema-bo-200: #e5e5e5; --tema-bo-300: #d4d4d4; --tema-bo-400: #a3a3a3;
    --tema-bo-500: #737373; --tema-bo-600: #525252; --tema-bo-700: #404040; --tema-bo-800: #262626; --tema-bo-900: #171717; --tema-bo-950: #0a0a0a;
}

html[data-tema-mode="dark"][data-tema-base="tinted"] {
    --tema-bo-50: color-mix(in srgb, var(--tema-primary, #007bff) 8%, #fff);
    --tema-bo-100: color-mix(in srgb, var(--tema-primary, #007bff) 14%, #fff);
    --tema-bo-200: color-mix(in srgb, var(--tema-primary, #007bff) 22%, #fff);
    --tema-bo-300: color-mix(in srgb, var(--tema-primary, #007bff) 34%, #fff);
    --tema-bo-400: color-mix(in srgb, var(--tema-primary, #007bff) 52%, #fff);
    --tema-bo-500: color-mix(in srgb, var(--tema-primary, #007bff) 85%, #000);
    --tema-bo-600: color-mix(in srgb, var(--tema-primary, #007bff) 55%, #000);
    --tema-bo-700: color-mix(in srgb, var(--tema-primary, #007bff) 42%, #000);
    --tema-bo-800: color-mix(in srgb, var(--tema-primary, #007bff) 32%, #000);
    --tema-bo-900: color-mix(in srgb, var(--tema-primary, #007bff) 22%, #000);
    --tema-bo-950: color-mix(in srgb, var(--tema-primary, #007bff) 14%, #000);
}

html[data-tema-mode="dark"] {
    --tema-n-0: var(--tema-o-950);
    --tema-n-50: color-mix(in srgb, var(--tema-o-950) 50%, var(--tema-o-900));
    --tema-n-100: var(--tema-o-900);
    --tema-n-200: var(--tema-o-800);
    --tema-n-300: var(--tema-o-700);
    --tema-n-400: var(--tema-o-600);
    --tema-n-500: var(--tema-o-500);
    --tema-n-600: var(--tema-o-400);
    --tema-n-700: var(--tema-o-300);
    --tema-n-800: var(--tema-o-200);
    --tema-n-900: var(--tema-o-100);
    --tema-n-950: var(--tema-o-50);
    --tema-n-1000: #fff;
}

/* En oscuro la escala de la base se invierte igual que la global */
html[data-tema-mode="dark"][data-tema-base] {
    --tema-b-50: color-mix(in srgb, var(--tema-bo-950) 50%, var(--tema-bo-900));
    --tema-b-100: var(--tema-bo-900);
    --tema-b-200: var(--tema-bo-800);
    --tema-b-300: var(--tema-bo-700);
    --tema-b-400: var(--tema-bo-600);
    --tema-b-500: var(--tema-bo-500);
    --tema-b-600: var(--tema-bo-400);
    --tema-b-700: var(--tema-bo-300);
    --tema-b-800: var(--tema-bo-200);
    --tema-b-900: var(--tema-bo-100);
    --tema-b-950: var(--tema-bo-50);
}

/* El color base solo pinta las tablas: encabezado, cebra, hover y bordes del grid (.elg).
   Menú, fondo, botones, inputs y textos siguen solo el modo claro/oscuro y el primario. */
html[data-tema-base] .elg {
    --ctl-bg-sutil: var(--tema-b-50);
    --ctl-bg-hover: var(--tema-b-100);
    --ctl-borde: var(--tema-b-200);
    --ctl-texto-2: var(--tema-b-700);
}

/* Grids de Syncfusion (los de la mayoría de las pantallas): encabezado, hover y bordes siguen la base.
   El gris original del encabezado (#747679) equivale al paso 500; el hover (#ece9e9) al 200 y los bordes (#dee2e6) al 200.
   "body" sube la especificidad para ganarle a la capa generada, que se carga después. */
html[data-tema-base] body .e-grid .e-gridheader,
html[data-tema-base] body .e-grid .e-gridheader tr:first-child th {
    background: var(--tema-b-500) !important;
}

html[data-tema-base] body .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-columnselection):not(.e-updatedtd):not(.e-indentcell) {
    background-color: var(--tema-b-200);
}

html[data-tema-base] body .e-grid,
html[data-tema-base] body .e-grid .e-rowcell,
html[data-tema-base] body .e-grid .e-headercell,
html[data-tema-base] body .e-grid .e-gridheader {
    border-color: var(--tema-b-200);
}

/* ---------- Componentes propios (librería EasyComponentes: EasyGrid, EasyCombo, EasyToast) ----------
 * La librería solo lee tokens --easy-*; aquí se conectan con los del tema. Los --ctl-* (controles.css) ya siguen
 * el modo claro/oscuro y el primario, así que los componentes cambian junto con el resto de la plataforma. */
:root {
    --easy-color-superficie: var(--ctl-bg);
    --easy-color-superficie-alterna: var(--ctl-bg-sutil);
    --easy-color-hover: var(--ctl-bg-hover);
    --easy-color-borde: var(--ctl-borde);
    --easy-color-texto: var(--ctl-texto);
    --easy-color-texto-tenue: var(--ctl-tenue);
    --easy-color-primario: var(--ctl-primario);
    --easy-color-primario-fuerte: color-mix(in srgb, var(--ctl-primario) 82%, #000);
    --easy-color-primario-suave: color-mix(in srgb, var(--ctl-primario) 10%, var(--ctl-bg));
    --easy-color-sobre-primario: var(--ctl-primario-fg);
    --easy-color-seleccion: color-mix(in srgb, var(--ctl-primario) 9%, var(--ctl-bg));
    --easy-color-foco: color-mix(in srgb, var(--ctl-primario) 22%, transparent);
    --easy-color-campo: var(--ctl-bg);
    --easy-color-campo-texto: var(--ctl-texto);
    --easy-color-campo-borde: var(--ctl-borde-fuerte);
    --easy-color-popup: var(--ctl-bg);
    --easy-color-overlay: rgba(0, 0, 0, .35);
    --easy-color-peligro: var(--ctl-peligro);
    /* Encabezado de tabla: el mismo gris que los grids de Syncfusion (la capa generada lo ajusta en oscuro) */
    --easy-color-encabezado-tabla: var(--tema-g-747679, #747679);
    --easy-color-encabezado-tabla-texto: #fff;
    --easy-radio-base: var(--ctl-radio);
    --easy-fuente-base: var(--tema-fuente);
    --easy-sombra-popup: var(--ctl-sombra);
}

html[data-tema-mode="dark"] {
    --easy-color-overlay: rgba(0, 0, 0, .6);
}

/* Con color base, el EasyGrid se pinta igual que las demás tablas: encabezado, cebra, hover y bordes */
html[data-tema-base] .easy-grid {
    --easy-color-encabezado-tabla: var(--tema-b-500);
    --easy-color-superficie-alterna: var(--tema-b-50);
    --easy-color-hover: var(--tema-b-100);
    --easy-color-borde: var(--tema-b-200);
}

/* ---------- Preferencias de tablas (ThemeSwitcher) en todos los grids ----------
 * Tamaño de texto (data-tema-fuente), densidad (data-tema-densidad), filas alternadas (data-tema-grid-cebra),
 * líneas verticales (data-tema-grid-lineas), resaltado al pasar el mouse (data-tema-grid-hover) y sombra de columnas fijas (data-tema-grid-fijas).
 * El tipo de letra ya lo aplica a todos los elementos la regla de tipografía de abajo. Los ElGrid (.elg) lo resuelven en controles.css. */

/* EasyGrid / EasyCombo / EasyToast: la librería lee estos tokens */
:root {
    --easy-escala-fuente: var(--ctl-fe, 1);
    --easy-ajuste-fila: var(--ctl-dens-fila, 0px);
}

/* Filas alternadas activas por omisión, con el mismo tono que los ElGrid */
.easy-grid {
    --easy-color-cebra: color-mix(in srgb, var(--easy-color-superficie-alterna) 70%, var(--easy-color-superficie));
}

html[data-tema-grid-cebra="no"] .easy-grid {
    --easy-grid-cebra: var(--easy-grid-bg);
}

html[data-tema-grid-lineas="si"] .easy-grid {
    --easy-color-linea-columna: var(--easy-grid-fila-borde);
}

html[data-tema-grid-hover="no"] .easy-grid-row:hover {
    --easy-grid-row-bg: var(--easy-grid-bg);
}

/* Sombra en el borde de las columnas fijas: apagada por omisión, la enciende data-tema-grid-fijas="si" */
html[data-tema-grid-fijas="si"] .easy-grid .easy-grid-fz-l {
    box-shadow: 1px 0 0 var(--easy-grid-borde), 8px 0 10px -8px rgba(0, 0, 0, .28);
}

html[data-tema-grid-fijas="si"] .easy-grid .easy-grid-fz-r {
    box-shadow: -1px 0 0 var(--easy-grid-borde), -8px 0 10px -8px rgba(0, 0, 0, .28);
}

/* ---------- Estilo de botones (ThemeSwitcher > Botones, data-tema-botones) ----------
 * La librería (EasyBoton, EasyMenuBoton y los botones de EasyGrid) lee --easy-boton-texto, -fondo, -fondo-hover, -borde y -borde-hover.
 * Sin data-tema-botones no se define ninguno y queda el botón sobrio de siempre. Primario, plano y peligro no cambian.
 * El mismo bloque pinta la vista previa del ThemeSwitcher (.tema-boton-muestra[data-estilo]), así que la muestra cambia con el modo.
 * El acento sale ya ajustado para contrastar con el fondo claro u oscuro (--tema-acento-sobre-*, lo calcula tema.js), con el primario como respaldo. */
:root {
    --easy-boton-acento: var(--tema-acento-sobre-claro, var(--ctl-primario));
}

html[data-tema-mode="dark"] {
    --easy-boton-acento: var(--tema-acento-sobre-oscuro, var(--ctl-primario));
}

/* Sobrio (predeterminado): sin color del tema; borde y texto del mismo color. Se define en :root para que valga sin atributo, y en la muestra
   para que no herede el estilo elegido en html (los demás estilos lo sobrescriben por tener más especificidad) */
:root,
.tema-boton-muestra[data-estilo="default"] {
    --easy-boton-texto: var(--easy-color-texto);
    --easy-boton-fondo: var(--easy-color-superficie);
    --easy-boton-fondo-hover: var(--easy-color-hover);
    --easy-boton-borde: var(--easy-color-texto);
    --easy-boton-borde-hover: var(--easy-color-texto);
}

/* Tonal: velo suave del color del tema. El texto se mezcla con el del tema para no perder contraste con acentos claros */
html[data-tema-botones="tonal"],
.tema-boton-muestra[data-estilo="tonal"] {
    --easy-boton-texto: color-mix(in srgb, var(--easy-boton-acento) 75%, var(--easy-color-texto));
    --easy-boton-fondo: color-mix(in srgb, var(--easy-boton-acento) 10%, var(--easy-color-superficie));
    --easy-boton-fondo-hover: color-mix(in srgb, var(--easy-boton-acento) 18%, var(--easy-color-superficie));
    --easy-boton-borde: color-mix(in srgb, var(--easy-boton-acento) 30%, var(--easy-color-borde));
    --easy-boton-borde-hover: color-mix(in srgb, var(--easy-boton-acento) 55%, var(--easy-color-borde));
}

/* Contorno: fondo de la superficie, borde, texto e ícono del color del tema */
html[data-tema-botones="contorno"],
.tema-boton-muestra[data-estilo="contorno"] {
    --easy-boton-texto: var(--easy-boton-acento);
    --easy-boton-fondo: var(--easy-color-superficie);
    --easy-boton-fondo-hover: color-mix(in srgb, var(--easy-boton-acento) 10%, var(--easy-color-superficie));
    --easy-boton-borde: color-mix(in srgb, var(--easy-boton-acento) 65%, var(--easy-color-superficie));
    --easy-boton-borde-hover: var(--easy-boton-acento);
}

/* Sólido: relleno del color del tema. En modo claro el texto es el de "sobre primario"; en oscuro el acento ya es claro y el texto toma el color del fondo */
html[data-tema-botones="solido"],
.tema-boton-muestra[data-estilo="solido"] {
    --easy-boton-texto: var(--easy-color-sobre-primario);
    --easy-boton-fondo: var(--easy-color-primario);
    --easy-boton-fondo-hover: var(--easy-color-primario-fuerte);
    --easy-boton-borde: var(--easy-color-primario);
    --easy-boton-borde-hover: var(--easy-color-primario-fuerte);
}

html[data-tema-mode="dark"][data-tema-botones="solido"],
html[data-tema-mode="dark"] .tema-boton-muestra[data-estilo="solido"] {
    --easy-boton-texto: var(--easy-color-superficie);
    --easy-boton-fondo: var(--easy-boton-acento);
    --easy-boton-fondo-hover: color-mix(in srgb, var(--easy-boton-acento) 85%, #fff);
    --easy-boton-borde: var(--easy-boton-acento);
    --easy-boton-borde-hover: color-mix(in srgb, var(--easy-boton-acento) 85%, #fff);
}

/* Gris tonal: sin color del tema; fondo gris suave (el del texto muy diluido) y sin borde */
html[data-tema-botones="gris"],
.tema-boton-muestra[data-estilo="gris"] {
    --easy-boton-texto: var(--easy-color-texto);
    --easy-boton-fondo: color-mix(in srgb, var(--easy-color-texto) 8%, var(--easy-color-superficie));
    --easy-boton-fondo-hover: color-mix(in srgb, var(--easy-color-texto) 15%, var(--easy-color-superficie));
    --easy-boton-borde: transparent;
    --easy-boton-borde-hover: transparent;
}

/* Texto: sin fondo ni borde, texto e ícono del color del tema y un velo al pasar el mouse */
html[data-tema-botones="texto"],
.tema-boton-muestra[data-estilo="texto"] {
    --easy-boton-texto: var(--easy-boton-acento);
    --easy-boton-fondo: transparent;
    --easy-boton-fondo-hover: color-mix(in srgb, var(--easy-boton-acento) 12%, var(--easy-color-superficie));
    --easy-boton-borde: transparent;
    --easy-boton-borde-hover: transparent;
}

/* Invertido: fondo del color del texto y texto del color de la superficie; en modo oscuro se invierte solo porque ambos tokens ya cambian con el modo */
html[data-tema-botones="invertido"],
.tema-boton-muestra[data-estilo="invertido"] {
    --easy-boton-texto: var(--easy-color-superficie);
    --easy-boton-fondo: var(--easy-color-texto);
    --easy-boton-fondo-hover: color-mix(in srgb, var(--easy-color-texto) 85%, var(--easy-color-superficie));
    --easy-boton-borde: var(--easy-color-texto);
    --easy-boton-borde-hover: color-mix(in srgb, var(--easy-color-texto) 85%, var(--easy-color-superficie));
}

/* Sombra y peso del texto de los botones (ThemeSwitcher > Botones). Valen para cualquier estilo y para primario y peligro */
html[data-tema-boton-sombra="ligera"] {
    --easy-boton-sombra: 0 1px 2px rgba(0, 0, 0, .16);
}

html[data-tema-boton-sombra="marcada"] {
    --easy-boton-sombra: 0 2px 6px rgba(0, 0, 0, .3);
}

html[data-tema-mode="dark"][data-tema-boton-sombra="ligera"] {
    --easy-boton-sombra: 0 1px 3px rgba(0, 0, 0, .55);
}

html[data-tema-mode="dark"][data-tema-boton-sombra="marcada"] {
    --easy-boton-sombra: 0 3px 8px rgba(0, 0, 0, .7);
}

/* Normal = 400, el peso que ya tenían los botones en la aplicación (el cuerpo) */
:root {
    --easy-boton-peso: 400;
}

html[data-tema-boton-peso="semi"] {
    --easy-boton-peso: 600;
}

html[data-tema-boton-peso="negrita"] {
    --easy-boton-peso: 700;
}

html[data-tema-grid-hover="no"] .easy-grid-row:nth-child(even):hover {
    --easy-grid-row-bg: var(--easy-grid-cebra);
}

html[data-tema-grid-hover="no"] .easy-grid-row.selected:hover {
    --easy-grid-row-bg: var(--easy-grid-sel);
}

/* Grids de Syncfusion. Valores base de bootstrap4 + app.css: celda 14px con padding 7px (fila de 36px) y encabezado 11px */
html body .e-grid {
    --sf-grid-fila: var(--tema-g-ffffff, #fff);
    --sf-grid-cebra: color-mix(in srgb, var(--ctl-bg-sutil) 70%, var(--ctl-bg));
}

html[data-tema-base] body .e-grid {
    --sf-grid-cebra: color-mix(in srgb, var(--tema-b-50) 70%, var(--sf-grid-fila));
}

html[data-tema-grid-cebra="no"] body .e-grid {
    --sf-grid-cebra: var(--sf-grid-fila);
}

html body .e-grid .e-altrow,
html body .e-grid .e-altrow .e-rowcell:is(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze, .e-unfreeze) {
    background-color: var(--sf-grid-cebra);
}

html[data-tema-fuente] body .e-grid .e-rowcell {
    font-size: calc(14px * var(--ctl-fe, 1));
    line-height: calc(21px * var(--ctl-fe, 1));
}

html[data-tema-fuente] body .e-grid .e-headercelldiv {
    font-size: calc(11px * var(--ctl-fe, 1)) !important;
}

html[data-tema-densidad] body .e-grid .e-rowcell {
    padding-top: calc(7px + var(--ctl-dens-fila, 0px) / 2);
    padding-bottom: calc(7px + var(--ctl-dens-fila, 0px) / 2);
}

html[data-tema-grid-lineas="si"] body .e-grid .e-rowcell:not(:first-child),
html[data-tema-grid-lineas="si"] body .e-grid .e-headercell:not(:first-child) {
    border-left: 1px solid var(--ctl-borde);
}

/* Sin resaltado: la celda deja ver el fondo de su fila (normal o alterna); la selección se conserva */
html[data-tema-grid-hover="no"] body .e-grid .e-row:hover .e-rowcell:not(.e-active):not(.e-cellselectionbackground):not(.e-updatedtd):not(.e-indentcell),
html[data-tema-grid-hover="no"] body .e-grid .e-row:hover :is(.e-detailrowcollapse, .e-detailrowexpand):not(.e-active) {
    background-color: transparent !important;
}

html[data-tema-grid-hover="no"] body .e-grid .e-row:hover .e-rowcell:is(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze, .e-unfreeze):not(.e-active):not(.e-cellselectionbackground) {
    background-color: var(--sf-grid-fila) !important;
}

html[data-tema-grid-hover="no"] body .e-grid .e-altrow:hover .e-rowcell:is(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze, .e-unfreeze):not(.e-active):not(.e-cellselectionbackground) {
    background-color: var(--sf-grid-cebra) !important;
}

/* Colores en atributos SVG/HTML que la capa generada no alcanza */
html[data-tema-mode="dark"] #header .navbar-brand svg text {
    fill: var(--tema-n-1000);
}

/* ---------- Radio ---------- */
html[data-tema-radius] .e-btn,
html[data-tema-radius] .e-css.e-btn,
html[data-tema-radius] .btn,
html[data-tema-radius] .form-control,
html[data-tema-radius] .custom-select,
html[data-tema-radius] .input-group-text,
html[data-tema-radius] .e-input-group:not(.e-float-icon-left),
html[data-tema-radius] .e-input-group.e-control-wrapper:not(.e-float-icon-left),
html[data-tema-radius] input.e-input,
html[data-tema-radius] textarea.e-input,
html[data-tema-radius] .e-dialog,
html[data-tema-radius] .modal-content,
html[data-tema-radius] .card,
html[data-tema-radius] .e-card,
html[data-tema-radius] .e-toast,
html[data-tema-radius] .e-tooltip-wrap,
html[data-tema-radius] .e-popup.e-ddl,
html[data-tema-radius] .e-dropdown-popup,
html[data-tema-radius] .e-contextmenu-wrapper ul,
html[data-tema-radius] .e-grid,
html[data-tema-radius] .e-pager .e-numericitem,
html[data-tema-radius] .e-badge,
html[data-tema-radius] .badge,
html[data-tema-radius] .alert {
    border-radius: var(--tema-radius) !important;
}

/* Los controles dentro de un grupo no llevan radio propio: lo pone el contenedor */
html[data-tema-radius] .e-input-group input.e-input,
html[data-tema-radius] .e-input-group textarea.e-input,
html[data-tema-radius] .e-input-group.e-control-wrapper input.e-input {
    border-radius: 0 !important;
}

html[data-tema-radius] .e-input-group .e-input-group-icon:last-child {
    border-radius: 0 var(--tema-radius) var(--tema-radius) 0 !important;
}

html[data-tema-radius] .e-dialog .e-dlg-header-content {
    border-radius: var(--tema-radius) var(--tema-radius) 0 0 !important;
}

html[data-tema-radius] .e-grid .e-gridheader {
    border-top-left-radius: var(--tema-radius);
    border-top-right-radius: var(--tema-radius);
}

html[data-tema-radius] .e-checkbox-wrapper .e-frame,
html[data-tema-radius] .e-css.e-checkbox-wrapper .e-frame,
html[data-tema-radius] .custom-checkbox .custom-control-label::before {
    border-radius: calc(var(--tema-radius) * 0.5) !important;
}

/* ---------- Tipografía ----------
 * Una sola fuente para toda la plataforma: la del menú (pila del sistema de Bootstrap; Segoe UI en Windows).
 * Pisa las fuentes sueltas de app.css y de Syncfusion, y respeta los íconos (FontAwesome, e-icons, fontello) y el texto monoespaciado. */
:root {
    --tema-fuente-sistema: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --tema-fuente: var(--tema-fuente-sistema);
}

/* Tipo de letra elegido en Apariencia > Lectura (js/tema.js la descarga de Google Fonts); mientras llega se ve la del sistema */
html[data-tema-letra="inter"] { --tema-fuente: "Inter", var(--tema-fuente-sistema); }
html[data-tema-letra="roboto"] { --tema-fuente: "Roboto", var(--tema-fuente-sistema); }
html[data-tema-letra="ibm-plex"] { --tema-fuente: "IBM Plex Sans", var(--tema-fuente-sistema); }
html[data-tema-letra="work-sans"] { --tema-fuente: "Work Sans", var(--tema-fuente-sistema); }
html[data-tema-letra="montserrat"] { --tema-fuente: "Montserrat", var(--tema-fuente-sistema); }
html[data-tema-letra="poppins"] { --tema-fuente: "Poppins", var(--tema-fuente-sistema); }
html[data-tema-letra="dm-sans"] { --tema-fuente: "DM Sans", var(--tema-fuente-sistema); }
html[data-tema-letra="manrope"] { --tema-fuente: "Manrope", var(--tema-fuente-sistema); }
html[data-tema-letra="jakarta"] { --tema-fuente: "Plus Jakarta Sans", var(--tema-fuente-sistema); }
html[data-tema-letra="open-sans"] { --tema-fuente: "Open Sans", var(--tema-fuente-sistema); }
html[data-tema-letra="lato"] { --tema-fuente: "Lato", var(--tema-fuente-sistema); }
html[data-tema-letra="source-sans"] { --tema-fuente: "Source Sans 3", var(--tema-fuente-sistema); }
html[data-tema-letra="fira-sans"] { --tema-fuente: "Fira Sans", var(--tema-fuente-sistema); }
html[data-tema-letra="pt-sans"] { --tema-fuente: "PT Sans", var(--tema-fuente-sistema); }
html[data-tema-letra="nunito"] { --tema-fuente: "Nunito", var(--tema-fuente-sistema); }
html[data-tema-letra="rubik"] { --tema-fuente: "Rubik", var(--tema-fuente-sistema); }
html[data-tema-letra="barlow"] { --tema-fuente: "Barlow", var(--tema-fuente-sistema); }
html[data-tema-letra="roboto-condensed"] { --tema-fuente: "Roboto Condensed", var(--tema-fuente-sistema); }

html body,
html body *:not(i):not(.fa):not([class*="fa-"]):not([class*="icon"]):not([class*="e-icons"]):not(kbd):not(code):not(pre):not(samp):not(svg):not(svg *) {
    font-family: var(--tema-fuente) !important;
}