/* ============================================================================================= GTECH · TOKENS DE DISENO ============================================================================================= ESTE ARCHIVO ES EL CONTRATO. El ERP es la referencia del look & feel de la suite (CRM, TM, TH, DOC, EDU), asi que lo que se decide aqui es lo que las demas copian. Copiarlo entero es la forma correcta de empezar en otra plataforma: si una necesita un valor distinto, lo redefine DESPUES, y asi se ve que se aparto y por que. DE DONDE SALEN LOS COLORES. Del LOGO, no de lo que habia en los CSS. El SVG de la marca -gtech-erp-logo.svg y su version vertical, identicos- lleva exactamente cinco: #00BFAE el verde-azulado vivo #00A99D el verde-azulado de la marca #00857C su version oscura #58595B el gris del texto #FFFFFF GREEN TECH ES VERDE Y GRIS. Los azules que estaban repartidos por los CSS son herencia de ContaWeb, el producto que se retiro, y no aparecen en el logo. Se van. POR QUE TOKENS Y NO HEXADECIMALES. Antes de esto no habia NI UNA variable CSS en el proyecto y tampoco modo oscuro. Con el color escrito a mano en cada sitio, cambiar la marca es buscar y reemplazar, y el modo oscuro no se puede ni intentar. COMO SE USAN. Siempre por su PAPEL, no por su color: `var(--gt-texto)`, no `var(--gt-gris-900)`. El dia que el fondo sea oscuro, el papel sigue siendo el mismo y el color cambia solo. Un `var(--gt-verde-700)` escrito en un texto es un texto que no sabe volverse claro. VIVE EN GTECH COMUN DESDE LA 0.17. Salio del ERP (ERP.Pymes.Web/wwwroot/css/gtech-tokens.css, 9aebda3a) y ahora lo trae el paquete: _content/GTECH.Comun.Web/gtech-tokens.css, enlazado el ULTIMO en el (Principios 6.1). gtech.css va antes y usa estos papeles. SUPONE LA RAIZ EN EL TAMANO DEL NAVEGADOR. Las medidas van en rem: --gt-texto-md: 1rem son 16 px solo si `html` no tiene font-size. Una plataforma que ponga `html { font-size: 15px }` corre la escala entera un 6 % sin que nada parezca estar mal (lo midio GTECH EDU el 2026-10-28: el cuerpo daba 15 px con el contrato ganando en `body`). No se pone tamano en `html`. MOVIL PRIMERO, Y TRES PARCHES QUE NO LO SON. Lo nuevo de este archivo se escribe para el telefono y se amplia con `min-width` (Principios 6.7). Los tres bloques `max-width: 640.98px` del final no son reglas nuestras: corrigen a Bootstrap y a Radzen, que estan escritos para escritorio, y solo se pueden corregir recortando. Por eso siguen ahi, y por eso rige el 6.8. ============================================================================================= */ :root { /* --------------------------------------------------------------------- La marca, en crudo Esta escala NO se usa directamente en los componentes: alimenta los papeles de abajo. */ --gt-verde-900: #00564f; --gt-verde-800: #00706a; --gt-verde-700: #00857c; /* del logo */ --gt-verde-600: #00a99d; /* del logo · EL color de la marca */ --gt-verde-500: #00bfae; /* del logo · el vivo */ --gt-verde-300: #7fd9d0; --gt-verde-100: #d9f2ef; --gt-verde-050: #eff9f8; /* El gris sale del #58595B del logo: la misma familia, aclarada y oscurecida. Un gris neutro de otra escala, al lado del gris del logo, se ve sucio. */ --gt-gris-900: #1f2021; --gt-gris-800: #2e2f31; --gt-gris-700: #434447; --gt-gris-600: #58595b; /* del logo */ --gt-gris-500: #7c7d80; --gt-gris-400: #a3a4a6; --gt-gris-300: #cfd0d1; --gt-gris-200: #e4e5e6; --gt-gris-100: #f1f1f2; --gt-gris-050: #f7f7f8; --gt-blanco: #ffffff; /* Los estados. El rojo y el ambar no estaban en la paleta medida: se escogen aqui, y se escogen accesibles sobre fondo claro (contraste >= 4.5:1 con texto blanco encima). */ --gt-exito-500: #0f7b4a; --gt-aviso-500: #b45309; --gt-peligro-500: #b3261e; /* Los tintes de los estados: el fondo suave que se pone DEBAJO del color, no el color. El acento ya tenia el suyo (--gt-acento-suave); estos son sus hermanos. */ --gt-peligro-suave: #fbeae8; --gt-exito-suave: #e6f4ed; /* El tinte del aviso era #fdf0e3 y el ambar encima daba 4,48:1: se quedaba a dos centesimas del 4,5 (lo midio GTECH TH el 2026-10-28 con su prueba de contraste). #fff7ed da 4,73:1 y sigue siendo el mismo naranja claro. */ --gt-aviso-suave: #fff7ed; --gt-info-500: var(--gt-verde-700); /* --------------------------------------------------------------------- Los papeles Esto es lo que se usa en los componentes. */ --gt-fondo: var(--gt-gris-050); --gt-superficie: var(--gt-blanco); --gt-superficie-alta: var(--gt-blanco); --gt-borde: var(--gt-gris-300); --gt-borde-suave: var(--gt-gris-200); /* EL CONTORNO DE UN CONTROL (un campo, un boton vacio) tiene que verse: WCAG 1.4.11 le pide 3:1 contra lo que lo rodea. --gt-borde da 1,54:1 y sirve para dividir filas, no para dibujar un campo. Este da 4,12:1 sobre la superficie y 3,84:1 sobre el fondo (lo midio la sesion del CRM el 2026-10-28: ningun papel de borde llegaba). */ --gt-borde-fuerte: var(--gt-gris-500); --gt-texto: var(--gt-gris-900); /* El texto suave es el gris DEL LOGO (600), no el 500. Con el 500 daba 4,12:1 sobre la superficie y 3,84:1 sobre el fondo, por debajo del 4,5 que pide la norma para texto: el 500 es para bordes e iconos, no para leer. Con el 600, 7,01:1 y 6,55:1 (GTECH TH, 2026-10-28). */ --gt-texto-suave: var(--gt-gris-600); --gt-texto-sobre-acento: var(--gt-blanco); /* EL ACENTO ES EL VERDE DE LA MARCA, Y ES EL 800. El vivo se reserva para lo que NO lleva texto encima: una barra, un borde, un subrayado. CORREGIDO EL 2026-10-27, DESPUES DE MEDIRLO EN PANTALLA. Estaba en el 700 (#00857c) con la nota de que daba 4,6:1, y era verdad **contra blanco puro**, que es donde no se usa. Medido contra las superficies reales -el fondo #f7f7f8, el gris 100, la banda del titulo- daba 4,00 a 4,29: por debajo del minimo de 4,5. El titulo de cada pantalla, los iconos de la barra y el boton «Importar» estaban todos un poco por debajo. sobre #00857c #00706a blanco 4,52 5,96 fondo gris 4,22 5,56 gris 100 4,00 5,28 blanco encima 4,52 5,96 El 800 pasa en todas, y ademas mejora el texto blanco sobre el boton lleno. La leccion vale mas que el numero: un contraste se mide contra el fondo donde el color SE USA, no contra blanco. */ --gt-acento: var(--gt-verde-800); /* EL VIVO ES DECORATIVO: barra, subrayado, borde de lo que ya se distingue por otra cosa. Da 2,16:1 sobre el fondo y por eso NUNCA es el unico indicador de un estado (la pestana activa, lo seleccionado): para eso esta --gt-foco o --gt-acento. */ --gt-acento-vivo: var(--gt-verde-500); --gt-acento-suave: var(--gt-verde-100); --gt-secundario: var(--gt-gris-600); --gt-secundario-suave: var(--gt-gris-100); --gt-foco: var(--gt-verde-700); /* EL MENU LATERAL tiene sus propios papeles porque es la unica zona con fondo oscuro permanente: lo que va encima necesita colores que no salen de los de arriba. Antes eran tres azules de ContaWeb escritos a mano en NavMenu.razor.css. */ --gt-menu-fondo: var(--gt-verde-900); --gt-menu-realce: var(--gt-verde-700); --gt-menu-barra: var(--gt-verde-500); --gt-menu-texto: var(--gt-blanco); /* EL FONDO DEL CAJON, siempre opaco (Principios 9.3). Si un tema pone el fondo del menu semitransparente (el vidrio), el 4 % que no se nota sobre la pagina se vuelve texto de la pagina leyendose a traves del cajon. Lo vio el CRM. Un tema cambia este color, nunca su opacidad. */ --gt-cajon-fondo: var(--gt-menu-fondo); /* --------------------------------------------------------------------- Tipografia Una escala de seis pasos. Mas pasos no se recuerdan y acaban inventandose tamanos sueltos. El cuerpo es 16px A PROPOSITO: en iOS, un campo de formulario con letra menor de 16px hace que Safari haga zoom al tocarlo, y el usuario se queda con la pagina descuadrada. Es el error movil mas comun y no se ve en el escritorio. */ --gt-fuente: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --gt-fuente-mono: "Cascadia Mono", Consolas, "SF Mono", monospace; --gt-texto-xs: 0.75rem; /* 12px · solo etiquetas y pies */ --gt-texto-sm: 0.875rem; /* 14px · secundario */ --gt-texto-md: 1rem; /* 16px · CUERPO y todo campo de formulario */ --gt-texto-lg: 1.125rem; /* 18px */ --gt-texto-xl: 1.5rem; /* 24px · titulo de pantalla */ --gt-texto-2xl: 2rem; /* 32px · solo portadas */ --gt-peso-normal: 400; --gt-peso-medio: 600; --gt-peso-fuerte: 700; --gt-interlinea: 1.5; /* --------------------------------------------------------------------- Espacio Escala de 4px. Todo margen y todo relleno sale de aqui. */ --gt-esp-1: 0.25rem; --gt-esp-2: 0.5rem; --gt-esp-3: 0.75rem; --gt-esp-4: 1rem; --gt-esp-5: 1.5rem; --gt-esp-6: 2rem; --gt-esp-7: 3rem; /* --------------------------------------------------------------------- Formas y sombras */ --gt-radio-sm: 4px; --gt-radio-md: 8px; --gt-radio-lg: 14px; --gt-radio-redondo: 999px; --gt-sombra-1: 0 1px 2px rgba(16, 24, 40, 0.06); --gt-sombra-2: 0 4px 12px rgba(16, 24, 40, 0.10); --gt-sombra-3: 0 12px 28px rgba(16, 24, 40, 0.16); /* --------------------------------------------------------------------- El dedo EL TAMANO MINIMO DE LO QUE SE TOCA. 44px es la guia de Apple y 48dp la de Android; se toma el mayor para no quedarse corto. Un boton de 32px es comodo con raton e imposible en un autobus. Todo lo pulsable -boton, fila de menu, icono de accion- usa esta medida. */ --gt-toque-min: 48px; /* La barra de abajo en el movil tiene que esquivar la zona del gesto del sistema. */ --gt-seguro-abajo: env(safe-area-inset-bottom, 0px); --gt-transicion: 150ms ease; --gt-z-menu: 1000; --gt-z-barra: 1010; --gt-z-modal: 1050; --gt-z-aviso: 1080; /* EL VELO detras de un cajon, un panel o un modal. Un solo valor, para que el oscurecido sea el mismo en toda la suite (lo pidio GTECH DOC, que lo tenia como suyo). */ --gt-velo: rgb(16 24 40 / 0.45); /* RADZEN PONE MAYUSCULAS en las cabeceras de grilla, las insignias, el calendario y el programador. La caja baja es un principio (7.9), y una MAYUSCULA de tema la desmiente en cada grilla. Se apaga en sus variables, no pisando clases (GTECH DOC, 2026-10-28). */ --rz-grid-header-text-transform: none; --rz-badge-text-transform: none; --rz-datepicker-calendar-header-text-transform: none; --rz-scheduler-header-text-transform: none; --rz-scheduler-today-button-text-transform: none; --rz-text-overline-text-transform: none; } /* ============================================================================================= MODO OSCURO Se redefinen los PAPELES, nunca la escala cruda. Por eso los componentes no cambian una linea. Va por preferencia del sistema Y por un atributo en la raiz, para que la persona pueda forzarlo desde la aplicacion sin pelearse con el sistema operativo. ============================================================================================= */ @media (prefers-color-scheme: dark) { :root:not([data-gt-tema="claro"]) { --gt-fondo: #16181a; --gt-superficie: #1d1f22; --gt-superficie-alta: #26292d; --gt-borde: #3a3d41; --gt-borde-suave: #2b2e32; --gt-borde-fuerte: #8a8c8f; /* 4,9:1 sobre la superficie oscura, 5,28:1 sobre el fondo */ --gt-texto: #eceded; --gt-texto-suave: #a3a4a6; /* En oscuro el verde oscuro de la marca no se lee sobre el fondo: manda el vivo, y el oscuro pasa a ser solo fondo de realce. */ --gt-acento: #2fd3c2; --gt-acento-vivo: #5ee0d1; --gt-acento-suave: #0c2e2b; --gt-peligro-suave: #3a1715; --gt-exito-suave: #0c2a1c; --gt-aviso-suave: #331f08; --gt-secundario: #b9bbbd; --gt-secundario-suave: #24262a; --gt-exito-500: #3fae77; --gt-aviso-500: #d99133; --gt-peligro-500: #e5695f; --gt-sombra-1: 0 1px 2px rgba(0, 0, 0, 0.40); --gt-sombra-2: 0 4px 12px rgba(0, 0, 0, 0.50); --gt-sombra-3: 0 12px 28px rgba(0, 0, 0, 0.60); } } :root[data-gt-tema="oscuro"] { --gt-fondo: #16181a; --gt-superficie: #1d1f22; --gt-superficie-alta: #26292d; --gt-borde: #3a3d41; --gt-borde-suave: #2b2e32; --gt-borde-fuerte: #8a8c8f; --gt-texto: #eceded; --gt-texto-suave: #a3a4a6; --gt-acento: #2fd3c2; --gt-acento-vivo: #5ee0d1; --gt-acento-suave: #0c2e2b; --gt-peligro-suave: #3a1715; --gt-exito-suave: #0c2a1c; --gt-aviso-suave: #331f08; --gt-secundario: #b9bbbd; --gt-secundario-suave: #24262a; --gt-exito-500: #3fae77; --gt-aviso-500: #d99133; --gt-peligro-500: #e5695f; --gt-sombra-1: 0 1px 2px rgba(0, 0, 0, 0.40); --gt-sombra-2: 0 4px 12px rgba(0, 0, 0, 0.50); --gt-sombra-3: 0 12px 28px rgba(0, 0, 0, 0.60); } /* ============================================================================================= LOS CORTES Antes habia UNO SOLO, a 640,98px: «movil o no movil», sin tablet. Son tres, y estan nombrados por lo que significan, no por el aparato: un portatil con la ventana a media pantalla es «mediano» aunque sea un escritorio. Las consultas de medios no admiten var(), asi que estos valores se repiten a mano en los CSS. Se dejan escritos aqui para que haya UN sitio donde se consultan. --gt-corte-sm: 640px de aqui para abajo, un telefono --gt-corte-md: 960px tablet o ventana a medias --gt-corte-lg: 1280px escritorio LA REGLA ES MOVIL PRIMERO: se escribe el estilo del telefono sin consulta de medios, y se AMPLIA con `min-width`. Al reves -escribir el escritorio y recortar- es como esta hoy, y por eso lo movil parece un apano. ============================================================================================= */ :root { --gt-corte-sm: 640px; --gt-corte-md: 960px; --gt-corte-lg: 1280px; } /* ============================================================================================= LO MINIMO QUE TODA PLATAFORMA HEREDA ============================================================================================= */ html { /* Sin esto, iOS agranda la letra al girar el telefono a horizontal. */ -webkit-text-size-adjust: 100%; } body { font-family: var(--gt-fuente); font-size: var(--gt-texto-md); line-height: var(--gt-interlinea); color: var(--gt-texto); background: var(--gt-fondo); } /* EL FOCO SE VE. Se quita el contorno por defecto en muchos temas y entonces quien navega con teclado -o con un lector de pantalla- no sabe donde esta. Aqui se pone uno propio y visible. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--gt-foco); outline-offset: 2px; border-radius: var(--gt-radio-sm); } /* Quien pidio menos movimiento, menos movimiento. No es un adorno: para algunas personas una animacion de verdad marea. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================================================= EL PUENTE A LOS FRAMEWORKS DE DONDE VENIA EL AZUL. Al barrer el #35a0d7 de 290 pantallas quedaban los BOTONES, y la razon es que ese azul nunca fue nuestro: es el `--rz-secondary` del tema por defecto de Radzen. Es decir, los 434 hexadecimales repartidos por los archivos eran COPIAS a mano del color de un tema, y el original seguia intacto en su sitio. Medido el 2026-10-27 en Consulta Terceros: «Nuevo» y «Carga Masiva» salian en rgb(53,160,215), que es exactamente #35a0d7. --rz-primary: #ff6d41 naranja --rz-secondary: #35a0d7 el azul de ContaWeb · 179 botones + TODOS los enlaces de Radzen --rz-info: #2cc8c8 SE REAPUNTAN LAS VARIABLES, NO SE TOCAN LAS PANTALLAS. 159 `btn-primary` en 141 pantallas y 228 `ButtonStyle` de Radzen cambian de color aqui, en diez lineas, sin editar ni un .razor. Lo contrario -buscar y reemplazar en 141 archivos- es como se llego a tener 434 copias del color de un tema. POR ESO ESTE ARCHIVO VA EL ULTIMO EN App.razor: Radzen y los dos Bootstrap declaran esto mismo sobre `:root`, con la misma especificidad, y a igualdad gana el que se declara despues. LOS PAPELES NO SE INVENTAN: salen de los de arriba, que salen del logo. `--rz-secondary` se lleva el acento -y no el gris- porque en ESTE producto el boton principal de la pantalla es un Secondary: «Nuevo» lo es, y son 179 contra 49. Ponerle el gris seria apagar el boton que mas se pulsa para respetar una nomenclatura. LAS VARIANTES -light, -dark, -darker, -lighter- NO son opcionales: Radzen las usa para el hover y el pulsado. Si se deja solo la base, el boton es verde hasta que pasas el raton por encima y se vuelve azul. ============================================================================================= */ :root { /* ------------------------------------------------------------------------- Radzen */ --rz-primary: var(--gt-verde-800); --rz-primary-light: var(--gt-verde-700); --rz-primary-lighter: rgba(0, 112, 106, 0.16); --rz-primary-dark: var(--gt-verde-900); --rz-primary-darker: #004540; --rz-secondary: var(--gt-acento); --rz-secondary-light: var(--gt-verde-600); --rz-secondary-lighter: rgba(0, 133, 124, 0.18); --rz-secondary-dark: var(--gt-verde-800); --rz-secondary-darker: var(--gt-verde-900); /* El «info» de Radzen era otro verde-azulado (#2cc8c8) de su propia paleta, no de la nuestra: se trae al verde vivo de la marca, que es el mismo papel. */ --rz-info: var(--gt-info-500); --rz-info-light: var(--gt-verde-600); --rz-info-lighter: rgba(0, 133, 124, 0.18); --rz-info-dark: var(--gt-verde-800); --rz-info-darker: var(--gt-verde-900); /* Los estados SI conservan su color: un error en verde no es una decision de marca, es un error que no se ve. Lo que cambia es el tono exacto, al de la paleta, que esta elegido con contraste suficiente para llevar texto blanco encima. */ --rz-success: var(--gt-exito-500); --rz-success-light: #159a5d; --rz-success-dark: #0b5c37; --rz-success-darker: #084527; --rz-warning: var(--gt-aviso-500); --rz-warning-light: #d2690b; --rz-warning-dark: #8c4007; --rz-warning-darker: #6b3105; --rz-danger: var(--gt-peligro-500); --rz-danger-light: #cf2f26; --rz-danger-dark: #8c1e18; --rz-danger-darker: #6b1612; /* Los neutros, a la escala del gris del logo: un gris de otra familia, al lado del nuestro, se ve sucio. */ --rz-base: var(--gt-gris-300); --rz-base-light: var(--gt-gris-200); --rz-base-lighter: var(--gt-gris-100); --rz-base-dark: var(--gt-gris-500); --rz-base-darker: var(--gt-gris-800); /* Los enlaces de Radzen cuelgan de `--rz-secondary`, asi que ya quedan en verde; se escribe igualmente para que se vea que es una decision y no una consecuencia. */ /* El icono del filtro de la grilla cuelga del color «deshabilitado» de Radzen, que es un gris claro: medido, 2,19:1 sobre la cabecera, y para un icono el minimo es 3:1. */ --rz-grid-filter-color: var(--gt-gris-600); --rz-link-color: var(--gt-acento); --rz-link-hover-color: var(--gt-acento-vivo); /* ------------------------------------------------------------------------- Bootstrap 5 */ --bs-primary: #00857c; --bs-primary-rgb: 0, 133, 124; --bs-link-color: var(--gt-acento); --bs-link-color-rgb: 0, 133, 124; --bs-link-hover-color: var(--gt-acento-vivo); } /* Bootstrap pinta sus botones con variables PROPIAS del componente, no con --bs-primary: hay que reapuntar las del boton o `btn-primary` sigue saliendo #0d6efd. Son 159 usos en 141 pantallas. */ .btn-primary { --bs-btn-bg: var(--gt-acento); --bs-btn-border-color: var(--gt-acento); --bs-btn-hover-bg: var(--gt-verde-800); --bs-btn-hover-border-color: var(--gt-verde-800); --bs-btn-active-bg: var(--gt-verde-900); --bs-btn-active-border-color: var(--gt-verde-900); --bs-btn-disabled-bg: var(--gt-verde-300); --bs-btn-disabled-border-color: var(--gt-verde-300); } .btn-outline-primary { --bs-btn-color: var(--gt-acento); --bs-btn-border-color: var(--gt-acento); --bs-btn-hover-bg: var(--gt-acento); --bs-btn-hover-border-color: var(--gt-acento); --bs-btn-active-bg: var(--gt-verde-800); --bs-btn-active-border-color: var(--gt-verde-800); } /* ============================================================================================= LOS ICONOS: UN SOLO GROSOR Y UN SOLO TAMANO POR SITIO Material Symbols es una fuente VARIABLE -el navegador declara el rango «100 700» para la que sirve Radzen, comprobado-, y se estaba usando en el peso de fabrica, el 400, que al lado de texto de 14 px se lee pesado. El 300 es la linea que mas acerca el conjunto a un icono de sistema, y no cuesta ninguna descarga: es la MISMA fuente. Y un tamano por contexto. Los de las filas estaban en 12 px, que no es un icono pequeno: es letra pequena con forma de icono. ============================================================================================= */ .rzi { font-weight: 300; } /* ============================================================================================= LA FILA DE ACCIONES DE LAS GRILLAS DE DONDE SALE. Cada boton de accion llevaba ~180 caracteres de estilo EN LINEA con un color escogido a mano, y habia ocho colores distintos en la misma fila: amarillo editar, rojo borrar, azul estado de cuenta, verde credito, morado direcciones, naranja referencias, cian bitacora... Medidos: 363 botones asi, repartidos por 145 columnas de 155 pantallas. EL COLOR DEBE SIGNIFICAR, NO IDENTIFICAR. Ese codigo de ocho colores no lo aprende nadie -para eso ya esta el rotulo al pasar el raton-, y ocho colores compitiendo hacen que NINGUNO se vea. Aqui el color dice una sola cosa: esto que vas a tocar, y esto destruye. Asi que en reposo son glifos desnudos en gris: sin caja, sin borde, sin fondo. El color -y el fondo- aparecen al apuntarlos. Es tambien lo que mas rejuvenece la pantalla: el recuadro alrededor de cada icono envejece mas que el color que lleve dentro. NO ES UN SITIO MAS PEQUENO PARA PULSAR, AL CONTRARIO: la caja visible medira 32 px en vez de 25, y el area de toque llega a 32. Lo que se va es el dibujo de la caja, no la caja. ============================================================================================= */ .gt-accion { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; margin: 0 1px; border: 0; background: none; color: var(--gt-texto-suave); border-radius: var(--gt-radio-md); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; vertical-align: middle; box-shadow: none; } .gt-accion .rzi, .gt-accion i { font-size: 20px; line-height: 1; } .gt-accion:hover, .gt-accion:focus-visible { background: var(--gt-acento-suave); color: var(--gt-acento); } .gt-accion:active { background: var(--gt-verde-300); color: var(--gt-verde-900); } /* LO QUE DESTRUYE SE AVISA, PERO NO GRITA TODO EL DIA. En reposo va en gris como los demas -una columna entera de papeleras rojas es ruido, no un aviso-; el rojo sale al apuntarla, que es el momento en que la advertencia sirve de algo. */ .gt-accion.peligro:hover, .gt-accion.peligro:focus-visible { background: var(--gt-peligro-suave); color: var(--gt-peligro-500); } /* LA EXCEPCION, y es una sola: lo que NO se deshace va en rojo desde el principio. La regla de arriba -gris en reposo- vale para un borrado de fila, que se vuelve a capturar. No vale para «Borrar la empresa entera», donde parecerse a «Editar» es justo el riesgo. Se escribe como excepcion a proposito, para que se vea que lo es: si un dia hay tres, hay que volver a pensar la regla, no seguir anadiendo. */ .gt-accion.peligro.siempre { color: var(--gt-peligro-500); } /* Un boton deshabilitado no se esconde ni se vuelve un fantasma ilegible: se apaga lo justo y deja de responder al raton. */ .gt-accion:disabled, .gt-accion.disabled { color: var(--gt-gris-400); background: none; cursor: default; } /* EL «···». Las acciones que no caben van detras de el. Mismo tamano y mismo comportamiento que las demas: es una accion mas, no un adorno. */ .gt-accion.mas[aria-expanded="true"] { background: var(--gt-acento-suave); color: var(--gt-acento); } /* EL ENVOLTORIO del «···». Es un
, y un
es de bloque: sin esto, el boton caia a una SEGUNDA LINEA dentro de la celda y cada fila de la grilla crecia al doble de alto. */ .gt-mas { display: inline-block; position: relative; vertical-align: middle; } /* El menu que abre. Va por encima de la grilla -que tiene su propia pila- y se pega al boton. */ .gt-mas-menu { position: absolute; z-index: 1200; min-width: 210px; padding: var(--gt-esp-1) 0; background: var(--gt-superficie); border: 1px solid var(--gt-borde-suave); border-radius: var(--gt-radio-md); box-shadow: var(--gt-sombra-2); } .gt-mas-menu button, .gt-mas-menu a { display: flex; align-items: center; gap: var(--gt-esp-3); width: 100%; min-height: 40px; padding: var(--gt-esp-2) var(--gt-esp-4); border: 0; background: none; color: var(--gt-texto); font-size: var(--gt-texto-sm); text-align: left; text-decoration: none; cursor: pointer; } .gt-mas-menu button:hover, .gt-mas-menu a:hover, .gt-mas-menu button:focus-visible, .gt-mas-menu a:focus-visible { background: var(--gt-acento-suave); color: var(--gt-acento); } .gt-mas-menu .rzi { font-size: 20px; color: var(--gt-texto-suave); flex: none; } .gt-mas-menu button:hover .rzi, .gt-mas-menu a:hover .rzi { color: inherit; } /* Lo que destruye, tambien dentro del menu. Misma regla que fuera: en reposo no grita, y el rojo sale al apuntarlo. */ .gt-mas-menu button.peligro:hover, .gt-mas-menu a.peligro:hover, .gt-mas-menu button.peligro:focus-visible, .gt-mas-menu a.peligro:focus-visible { background: var(--gt-peligro-suave); color: var(--gt-peligro-500); } /* EL DESPLEGABLE DE LA BARRA («Acciones»). Llevaba `border: 2px dotted` ESCRITO EN LINEA, 138 veces en 112 pantallas. Un borde punteado de 2 px no es una decision de diseno: es lo que alguien pone para marcar algo mientras trabaja, y ahi se quedo. Ademas iba del color del acento, asi que era lo mas llamativo de la barra sin ser lo mas importante. Se va de las 112 pantallas y se dice UNA vez, aqui: un borde fino, del color de los bordes, y el relieve al apuntarlo. El unico RadzenMenu del producto es este -el menu lateral es propio-, asi que la regla no alcanza a nada mas. */ .rz-menu .rz-navigation-item-link { border: 1px solid var(--gt-borde); border-radius: var(--gt-radio-md); color: var(--gt-acento); min-height: var(--gt-toque-min); padding: var(--gt-esp-2) var(--gt-esp-4); } .rz-menu .rz-navigation-item-link:hover { background: var(--gt-acento-suave); border-color: var(--gt-acento); color: var(--gt-acento); } /* LA BARRA DE LA PANTALLA: UN SOLO BOTON LLENO. «Nuevo» y «Carga masiva» salian los dos en verde solido, asi que ninguno era el principal. El lleno se reserva para la accion que de verdad manda; las demas van en texto con el acento. Esto NO quita acciones ni las esconde: les quita el relleno. */ .gt-barra-secundario, .rz-button.gt-barra-secundario { background: none !important; border-color: transparent !important; color: var(--gt-acento) !important; box-shadow: none !important; } .gt-barra-secundario:hover, .rz-button.gt-barra-secundario:hover { background: var(--gt-acento-suave) !important; color: var(--gt-acento) !important; } /* ============================================================================================= EL MODO OSCURO DE VERDAD: LO QUE LOS FRAMEWORKS NO VOLTEAN Los papeles de arriba ya voltean solos —fondo, texto, bordes, acento—, pero eso no basta, porque las pantallas no usan solo papeles: usan las utilidades de color de Bootstrap. Medido el 2026-10-27, la primera vez que se miro la aplicacion en oscuro: bg-light 408 usos en 250 pantallas text-dark 145 usos en 70 bg-secondary 68 usos en 60 bg-white 44 usos en 19 table-light 9 usos en 9 Y el resultado era el peor posible, porque NO se ve como un error: la banda del titulo de cada pantalla salia con fondo `rgb(248,249,250)` y texto `rgb(236,237,237)`. Claro sobre claro: el titulo no estaba roto, estaba INVISIBLE. NO SE ARREGLA EDITANDO 250 PANTALLAS. Bootstrap 5.3 pinta esas utilidades leyendo variables —`.bg-light` es `rgba(var(--bs-light-rgb), ...)`—, asi que se reapuntan las variables y cambian los 408 usos de una vez. Es el mismo movimiento que con los botones. SE REDEFINEN SOLO EN OSCURO. En claro, Bootstrap tiene razon y no hay nada que corregir. OJO CON LOS NOMBRES: en oscuro, «light» ya no significa claro. Significa «la superficie que se despega un paso del fondo», y «dark» significa «el texto principal». Se conserva el nombre porque esta escrito en 250 pantallas; lo que cambia es a que apunta. ============================================================================================= */ @media (prefers-color-scheme: dark) { :root:not([data-gt-tema="claro"]) { --bs-light: #1d1f22; --bs-light-rgb: 29, 31, 34; --bs-dark: #eceded; --bs-dark-rgb: 236, 237, 237; --bs-white: #1d1f22; --bs-white-rgb: 29, 31, 34; --bs-body-bg: #16181a; --bs-body-bg-rgb: 22, 24, 26; --bs-body-color: #eceded; --bs-body-color-rgb: 236, 237, 237; --bs-secondary: #434447; --bs-secondary-rgb: 67, 68, 71; --bs-border-color: #3a3d41; } } :root[data-gt-tema="oscuro"] { --bs-light: #1d1f22; --bs-light-rgb: 29, 31, 34; --bs-dark: #eceded; --bs-dark-rgb: 236, 237, 237; --bs-white: #1d1f22; --bs-white-rgb: 29, 31, 34; --bs-body-bg: #16181a; --bs-body-bg-rgb: 22, 24, 26; --bs-body-color: #eceded; --bs-body-color-rgb: 236, 237, 237; --bs-secondary: #434447; --bs-secondary-rgb: 67, 68, 71; --bs-border-color: #3a3d41; } /* Las tablas de Bootstrap llevan sus propias variables por fila, y `table-light` las fija a pelo en vez de leer `--bs-light`. Hay que repetirlas. */ @media (prefers-color-scheme: dark) { :root:not([data-gt-tema="claro"]) .table-light { --bs-table-color: var(--gt-texto); --bs-table-bg: var(--gt-superficie); --bs-table-border-color: var(--gt-borde); --bs-table-striped-bg: #232629; --bs-table-striped-color: var(--gt-texto); --bs-table-active-bg: #2a2d31; --bs-table-active-color: var(--gt-texto); --bs-table-hover-bg: #26292c; --bs-table-hover-color: var(--gt-texto); } } /* Y lo que esta escrito a mano en las pantallas: once sitios con blanco o gris claro en un `style=`. Son pocos y no vale la pena una variable: se apagan aqui por su valor. Esto es excepcional y se escribe como tal. La regla sigue siendo que un color no se escribe en la pantalla (§5.5 de los principios); estos once son deuda, no un permiso. */ @media (prefers-color-scheme: dark) { :root:not([data-gt-tema="claro"]) [style*="background: white"], :root:not([data-gt-tema="claro"]) [style*="background-color: white"], :root:not([data-gt-tema="claro"]) [style*="background: #fff"], :root:not([data-gt-tema="claro"]) [style*="background-color: #fff"], :root:not([data-gt-tema="claro"]) [style*="background:#fff"], :root:not([data-gt-tema="claro"]) [style*="background: #f8f9fa"], :root:not([data-gt-tema="claro"]) [style*="background:#f8f9fa"], :root:not([data-gt-tema="claro"]) [style*="background: #f9fafb"] { background-color: var(--gt-superficie) !important; color: var(--gt-texto); } } /* LA CABECERA DEL LOGO. Lleva un gris claro a proposito: el logotipo tiene el texto en el gris de la marca y sobre fondo oscuro no se leeria. En oscuro se baja a un gris apenas despegado, que sigue dando el contraste que el logo necesita sin ser un bloque blanco en la pantalla. */ @media (prefers-color-scheme: dark) { :root:not([data-gt-tema="claro"]) .sidebar .navbar-light { background-color: #e8e9ea !important; } } /* ============================================================================================= EL OSCURO, SEGUNDA PARTE: EL TEXTO SOBRE EL ACENTO Y LAS SUPERFICIES DE RADZEN Dos fallos que solo aparecieron al MEDIR el contraste de la pantalla, no al mirarla: 1. EL BOTON PRINCIPAL ERA ILEGIBLE. En oscuro el acento se aclara a #2fd3c2 —tiene que aclararse, si no desaparece sobre el fondo oscuro—, pero `--gt-texto-sobre-acento` estaba declarado UNA sola vez, en claro, y se quedaba en blanco. Blanco sobre turquesa claro da 1,9:1 cuando el minimo es 4,5. El boton «Crear» no se leia. Es la trampa del token que no voltea: los papeles de fondo y texto si voltean, y uno se confia. El que dice «lo que va ENCIMA del acento» tambien tiene que hacerlo, y al reves. 2. LA GRILLA SEGUIA CLARA. Radzen pinta sus superficies desde `--rz-base-50` … `--rz-base-900`, una escala que va de blanco a casi negro, y en oscuro hay que INVERTIRLA. Sin eso, la superficie principal del producto —la grilla, con su cabecera y sus filtros— se quedaba en claro dentro de una pantalla oscura: medido, fondo rgb(233,237,240). Radzen trae temas oscuros propios, pero cargar una segunda hoja entera por el tema es volver a tener dos sistemas conviviendo. Se invierte la escala con los grises que ya tenemos. ============================================================================================= */ @media (prefers-color-scheme: dark) { :root:not([data-gt-tema="claro"]) { /* Lo que va encima del acento, cuando el acento es claro. */ --gt-texto-sobre-acento: var(--gt-gris-900); /* La escala de Radzen, del reves: 50 era el blanco y pasa a ser el fondo; 900 era casi negro y pasa a ser el titulo. Los componentes no se enteran: siguen pidiendo «base-100» para una superficie y «base-800» para el texto. */ --rz-base-50: #16181a; --rz-base-100: #1d1f22; --rz-base-200: #232629; --rz-base-300: #2e3135; --rz-base-400: #3a3d41; --rz-base-500: #7c7d80; --rz-base-600: #a3a4a6; --rz-base-700: #cfd0d1; --rz-base-800: #eceded; --rz-base-900: #ffffff; --rz-white: #1d1f22; --rz-black: #ffffff; --rz-on-base: #eceded; --rz-on-base-light: #eceded; --rz-on-base-lighter: #eceded; --rz-on-base-dark: #16181a; --rz-on-base-darker: #16181a; --rz-base-background-color: var(--gt-fondo); --rz-text-color: var(--gt-texto); --rz-text-secondary-color: var(--gt-texto-suave); --rz-text-title-color: var(--gt-texto); --rz-text-disabled-color: var(--gt-gris-400); /* El icono del filtro de la grilla cuelga del color «deshabilitado», y con el gris 500 se quedaba en 3,7:1 sobre la cabecera. Para un icono el minimo es 3:1, asi que cumplia, pero subirlo un escalon no cuesta nada y se ve. */ --rz-grid-filter-color: var(--gt-gris-400); } } :root[data-gt-tema="oscuro"] { --gt-texto-sobre-acento: var(--gt-gris-900); --rz-base-50: #16181a; --rz-base-100: #1d1f22; --rz-base-200: #232629; --rz-base-300: #2e3135; --rz-base-400: #3a3d41; --rz-base-500: #7c7d80; --rz-base-600: #a3a4a6; --rz-base-700: #cfd0d1; --rz-base-800: #eceded; --rz-base-900: #ffffff; --rz-white: #1d1f22; --rz-black: #ffffff; --rz-on-base: #eceded; --rz-on-base-light: #eceded; --rz-on-base-lighter: #eceded; --rz-on-base-dark: #16181a; --rz-on-base-darker: #16181a; --rz-base-background-color: var(--gt-fondo); --rz-text-color: var(--gt-texto); --rz-text-secondary-color: var(--gt-texto-suave); --rz-text-title-color: var(--gt-texto); --rz-text-disabled-color: var(--gt-gris-400); --rz-grid-filter-color: var(--gt-gris-400); } /* LO QUE VA ENCIMA DE UN BOTON LLENO. Primero lo escribi como una regla, `.rz-button.rz-secondary { color: ... }`, y PERDIA: Radzen pinta con `.rz-button.rz-secondary.rz-shade-default`, que son tres clases contra dos. Escalar la especificidad habria funcionado y habria sido el error: la forma correcta es la misma de siempre —reapuntar la variable que el framework LEE— y entonces da igual con que selector pinte, hoy y cuando cambie. No hace falta repetirlo por tema: `--gt-texto-sobre-acento` ya voltea solo. */ :root { --rz-on-secondary: var(--gt-texto-sobre-acento); --rz-on-primary: var(--gt-texto-sobre-acento); --rz-on-info: var(--gt-texto-sobre-acento); } /* ============================================================================================= LA PALETA DE LOS GRAFICOS Radzen trae veintidos colores de serie —azul, naranja, rosa, amarillo, salmon, verde, cian…— que no son una paleta: son un arcoiris. En un grafico el color NO adorna, IDENTIFICA, y para eso hace falta que dos series contiguas se distingan de verdad, tambien para quien no distingue el rojo del verde. ESTA PALETA NO SE ESCOGIO A OJO: se valido con el comprobador de la guia de visualizacion, que mide seis cosas —banda de luminosidad, suelo de croma, separacion para daltonismo (deuteranopia y tritanopia), suelo para vision normal, y contraste contra la superficie—. Las dos versiones pasan las seis. Lo que el comprobador corrigio, y que a ojo habria pasado: · El verde 800 de la marca (#00857c) **lee como gris** en un grafico: croma 0,097, por debajo del suelo. El acento de la interfaz y el primer color de un grafico NO son el mismo problema. Se sube a #009c91, que sigue leyendose como el verde de la marca. · El gris de la marca no puede ser una serie, por lo mismo. · Mi primera version oscura estaba entera por encima de la banda —en oscuro es 0,48 a 0,67, mas estrecha que en claro— y el cian chocaba con el morado: 4,4 de separacion cuando el objetivo es 8. EL ORDEN IMPORTA y es fijo: el comprobador mide pares CONTIGUOS, y las series se asignan por orden. Una serie nueva no cambia el color de las anteriores. MAS DE OCHO SERIES NO SE RESUELVE CON UN NOVENO COLOR. Si un grafico necesita nueve, lo que necesita es agrupar el resto en «Otros», partirse en varios graficos pequenos, o cambiar de forma. Del 9 en adelante se dejan los de Radzen a proposito: que desentonen es la senal. ============================================================================================= */ :root { --rz-series-1: #009c91; /* verde de la marca */ --rz-series-2: #2d5fd1; /* azul */ --rz-series-3: #c2740a; /* ambar */ --rz-series-4: #c22e67; /* rosa */ --rz-series-5: #5a8f12; /* verde oliva */ --rz-series-6: #7b4fd4; /* morado */ --rz-series-7: #1f8fb5; /* cian */ --rz-series-8: #a3461f; /* terracota */ } /* LA VERSION OSCURA SE ELIGE, NO SE VOLTEA. Un color que funciona sobre papel blanco no es el mismo que funciona sobre un fondo oscuro: hay que volver a medirlo contra esa superficie. */ @media (prefers-color-scheme: dark) { :root:not([data-gt-tema="claro"]) { --rz-series-1: #1fa698; --rz-series-2: #5b8def; --rz-series-3: #c87f2c; --rz-series-4: #e05c8a; --rz-series-5: #6fa32e; --rz-series-6: #9b80e8; --rz-series-7: #2491bd; --rz-series-8: #c06a44; } } :root[data-gt-tema="oscuro"] { --rz-series-1: #1fa698; --rz-series-2: #5b8def; --rz-series-3: #c87f2c; --rz-series-4: #e05c8a; --rz-series-5: #6fa32e; --rz-series-6: #9b80e8; --rz-series-7: #2491bd; --rz-series-8: #c06a44; } /* Y LOS ESTADOS NO SON SERIES. Verde «bien», ambar «ojo», rojo «mal»: se reservan para decir eso y no se reutilizan como «la serie 4». Van siempre con su rotulo, nunca solos. */ :root { --gt-estado-bien: var(--gt-exito-500); --gt-estado-aviso: var(--gt-aviso-500); --gt-estado-mal: var(--gt-peligro-500); } /* ============================================================================================= LOS CAMPOS DE LOS FORMULARIOS Medido en pantalla el 2026-10-27: los campos —los de Bootstrap y los de Radzen, que conviven— salen a 14 px de letra y 36 px de alto. LOS 14 px SON UN DEFECTO EN UN TELEFONO, no una preferencia. En iOS, tocar un campo con letra menor de 16 px hace que Safari haga zoom sobre el, y la pagina se queda descuadrada: el usuario tiene que volver a encuadrarla a mano despues de cada campo. Es de los defectos que no se reportan porque parece que «asi es el movil». Y 36 px de alto esta por debajo de los 48 con los que un dedo acierta sin mirar. SE CORRIGE DONDE PASA. En escritorio hay raton y no hay zoom: los 14 px se quedan, que es lo que hace que quepa un formulario largo sin parecer un cartel. De 640 px para abajo, 16 px y la altura del dedo. ============================================================================================= */ @media (max-width: 640.98px) { .form-control, .form-select, .rz-textbox, .rz-inputtext, .rz-dropdown, .rz-datepicker input, .rz-numeric input, .rz-textarea, input[type="text"], input[type="number"], input[type="password"], input[type="email"], input[type="date"], input[type="search"], input[type="tel"], input[type="url"], input:not([type]), select, textarea { font-size: 16px !important; } /* El `!important` es a proposito y es la excepcion que confirma la regla: en el ERP hay 902 tamanos de letra escritos EN LINEA (censo del 2026-10-28, Principios 30), y un estilo en linea le gana a cualquier hoja. Mientras esa deuda exista, esta es la unica forma de que el campo no provoque el zoom. Cuando se limpien, el !important sobra y se quita. */ /* La altura nombra los MISMOS campos que la letra, tambien los que van sin clase. Antes solo nombraba los de Bootstrap y Radzen: en el ERP no se notaba, porque todo pasa por ellos, pero una plataforma sin marco recibia los 16 px y no los 48 (GTECH EDU, 2026-10-28: 413 , 223