/* ============================================================================================= GTECH DOC · LO QUE DOC REDEFINE SOBRE EL CONTRATO El contrato es gtech-tokens.css, que publica GTECH Común desde la 0.17 y se enlaza desde _content/GTECH.Comun.Web/ (Principios de la suite, 6.1; antes era una copia del ERP): no se edita aquí. Lo que DOC necesita distinto se redefine en este archivo, que carga DESPUÉS del contrato, y cada cosa dice por qué. Si algo de aquí le sirve a toda la suite, se lleva a la sesión de GTECH Común para que entre al contrato, y se borra de aquí. EL SENTIDO SE INVIRTIÓ (ADR-0003 §3). Antes, las variables --gt-* de DOC eran alias de la paleta propia de app.css (--tinta, --marca, --papel...). Ahora manda el contrato: los nombres viejos de DOC se quedan, porque los usan las pantallas (281 var(--gt-primary) medidos el 2026-10-27), pero apuntan a los PAPELES del contrato. Así, cuando los papeles voltean a oscuro, voltean también ellos. NO HAY UN HEXADECIMAL QUE NO ESTÉ EXPLICADO. Los pocos que quedan son de DOC y no existen en el contrato (el morado de una etiqueta, el color del ). ============================================================================================= */ :root { /* ------------------------------------------------------------------- Lo distinto de DOC El texto secundario en el gris del logo y el tinte del aviso los redefinía DOC mientras el contrato del ERP daba 4,12:1 y 4,48:1. La 0.17 de Común los corrigió (gris 600, 7,01:1; aviso suave #fff7ed, 4,73:1): ya no se redefinen aquí. */ /* La letra de Radzen. Radzen pinta sus componentes (grillas, campos, diálogos) en su propia letra, Source Sans Pro, que trae dentro del paquete: sin esto, la grilla salía en otra letra que el resto de la pantalla (principio 6.10). */ --rz-text-font-family: var(--gt-fuente); /* Las mayúsculas de Radzen (7.9) y el velo del cajón (9.3) los redefinía DOC; desde la 0.17.3 los trae el contrato (--rz-*-text-transform: none y --gt-velo), y aquí ya no se repiten. */ /* ------------------------------------------------------------------- Los nombres viejos de DOC Los usan las pantallas y las hojas de DOC. Apuntan a los papeles: no se escribe un color nuevo con ellos. El que escriba una pantalla nueva usa los papeles (--gt-texto, --gt-acento...). */ --tinta: var(--gt-texto); --tinta-suave: var(--gt-texto-suave); --linea: var(--gt-borde); --fondo: var(--gt-fondo); --papel: var(--gt-superficie); --marca: var(--gt-acento); --marca-clara: var(--gt-acento-suave); --sobre-marca: var(--gt-texto-sobre-acento); --sobre-marca-clara: var(--gt-verde-900); --marca-texto: var(--gt-acento); --alerta: var(--gt-peligro-500); --aviso: var(--gt-aviso-500); --aviso-suave: var(--gt-aviso-suave); --exito-texto: var(--gt-exito-500); --exito-suave: var(--gt-exito-suave); --gris-claro: var(--gt-gris-050); /* El borde de un campo tiene que dar 3:1 contra el papel (WCAG 1.4.11): el gris 500, 4,1:1. */ --borde-campo: var(--gt-gris-500); --foco: var(--gt-foco); --radio: var(--gt-radio-md); --sombra: var(--gt-sombra-1), var(--gt-sombra-2); /* Solo de DOC: una etiqueta morada (.bg-purple) y el color del de Bootstrap, que en su #d63384 no llega a 4,5:1 sobre el fondo (axe con sesión, E7-183). */ --morado: #6f42c1; --codigo: #b02a6b; /* El texto de un aviso sobre su tinte (alertas de error, la marca del plan, los avisos fijos de soporte y de demo). El --gt-peligro-500 y el --gt-aviso-500 del contrato son para el borde, el ícono y el botón: como letra sobre el tinte dan 5,6:1 y 4,7:1, y lo que había en DOC daba 7,6:1 y 8,5:1. Se toman los tonos oscuros que el mismo contrato define para Radzen, que no bajan: 7,8:1 sobre --gt-peligro-suave y 9,6:1 sobre --gt-aviso-suave (medido el 2026-10-29). */ --doc-peligro-texto: var(--rz-danger-dark); --doc-aviso-texto: var(--rz-warning-darker); /* El borde de un aviso: el color de su estado, diluido sobre la superficie (antes, dos rosados y un celeste escritos a mano, este último en un aviso que es verde). */ --doc-peligro-borde: color-mix(in srgb, var(--gt-peligro-500) 30%, var(--gt-superficie)); --doc-info-borde: color-mix(in srgb, var(--gt-info-500) 30%, var(--gt-superficie)); --gt-primary: var(--gt-acento); --gt-primary-dark: var(--gt-verde-900); --gt-primary-light: var(--gt-verde-600); --gt-primary-50: var(--gt-verde-050); --gt-primary-100: var(--gt-acento-suave); --gt-accent: var(--gt-verde-700); --gt-accent-dark: var(--gt-verde-800); --gt-accent-light: var(--gt-verde-050); --gt-sidebar-bg: var(--gt-superficie); --gt-sidebar-hover: var(--gt-fondo); --gt-sidebar-active: var(--gt-acento-suave); --gt-sidebar-text: var(--gt-texto-suave); --gt-sidebar-muted: var(--gt-texto-suave); --gt-bg: var(--gt-fondo); --gt-surface: var(--gt-superficie); --gt-border: var(--gt-borde); --gt-border-light: var(--gt-borde-suave); --gt-text: var(--gt-texto); --gt-text-secondary: var(--gt-texto-suave); --gt-text-muted: var(--gt-texto-suave); --gt-success: var(--gt-exito-500); --gt-warning: var(--gt-aviso-500); --gt-danger: var(--gt-peligro-500); --gt-info: var(--gt-info-500); --gt-shadow-xs: var(--gt-sombra-1); --gt-shadow-sm: var(--gt-sombra-1); --gt-shadow: var(--gt-sombra-2); --gt-shadow-lg: var(--gt-sombra-3); --gt-radius-sm: var(--gt-radio-sm); --gt-radius: var(--gt-radio-md); --gt-radius-lg: var(--gt-radio-lg); --gt-radius-xl: var(--gt-radio-lg); /* ------------------------------------------------------------------- Bootstrap, a los papeles El contrato reapunta el primario y los enlaces; DOC usa además estos de Bootstrap. */ --bs-body-font-family: var(--gt-fuente); --bs-body-bg: var(--gt-fondo); --bs-body-color: var(--gt-texto); --bs-border-color: var(--gt-borde); --bs-secondary-color: var(--gt-texto-suave); --bs-code-color: var(--codigo); --bs-border-radius: var(--gt-radio-md); --bs-border-radius-sm: var(--gt-radio-sm); --bs-border-radius-lg: var(--gt-radio-lg); /* El «secundario» y el «éxito» de Bootstrap, en los del contrato. Bootstrap pinta .text-secondary, .bg-secondary, .text-success, .bg-success... con estas tripletas, y con !important: antes DOC les ganaba con otro !important por clase (app.css). Reapuntar la tripleta deja la clase de Bootstrap tal cual y le da el color de la suite. Van en números porque así las pide Bootstrap: 88, 89, 91 es --gt-secundario (gris 600, 7:1 sobre blanco) y 15, 123, 74 es --gt-exito-500. El ámbar no se reapunta aquí: .bg-warning lleva letra oscura encima y con el ámbar del contrato no se leería. Se reapunta solo en .text-warning (app.css). */ --bs-secondary-rgb: 88, 89, 91; --bs-success-rgb: 15, 123, 74; } /* ============================================================================================= LAS ACCIONES DE LAS FILAS, DESNUDAS (principios 7.4 y 7.5) Medido el 2026-10-27 en /transaccionales/expedientes y /datos-maestros/tipos-documento: cada fila llevaba sus botones de Radzen solo con ícono en «Outlined» de tres colores (ver en verde, editar en el primario, borrar en ROJO), cada uno con su caja. El censo cuenta 161 botones de borrar en rojo en reposo. Como en el ERP, no se tocan las 60 pantallas: se dice UNA vez, aquí, para los botones de Radzen solo con ícono dentro de una grilla. Gris y sin caja en reposo; el acento al apuntar; y lo que es de peligro, rojo SOLO al apuntar. La clase .gt-accion del contrato es la forma para las pantallas nuevas; esto alcanza a las de antes. Se escribe con la especificidad justa para ganarle a Radzen, que pinta con `.rz-button.rz-variant-outlined.rz-danger.rz-shade-default` (cuatro clases). ============================================================================================= */ .rz-grid-table td .rz-button.rz-button-icon-only.rz-variant-outlined { background: none; box-shadow: none; color: var(--gt-texto-suave); } .rz-grid-table td .rz-button.rz-button-icon-only.rz-variant-outlined:hover, .rz-grid-table td .rz-button.rz-button-icon-only.rz-variant-outlined:focus-visible { background: var(--gt-acento-suave); box-shadow: none; color: var(--gt-acento); } .rz-grid-table td .rz-button.rz-button-icon-only.rz-variant-outlined.rz-danger:hover, .rz-grid-table td .rz-button.rz-button-icon-only.rz-variant-outlined.rz-danger:focus-visible { background: var(--gt-peligro-suave); color: var(--gt-peligro-500); } /* El dedo (7.7): en un aparato táctil el área sube a 48, el mínimo de los principios (la .gt-accion del contrato sube solo a 44; se lleva a Común). */ @media (pointer: coarse) { .rz-grid-table td .rz-button.rz-button-icon-only { min-width: var(--gt-toque-min); min-height: var(--gt-toque-min); } } /* ============================================================================================= BORRAR: GRIS EN REPOSO, ROJO AL APUNTAR (principio 7.5) La clase de DOC para todo botón que borra o quita: los de Bootstrap (contorno o enlace) y los de Radzen en texto. Eran 161 en rojo desde el principio (censo del 2026-10-27): 52 enlaces rojos, 47 contornos rojos, 32 botones llenos rojos y 30 de Radzen en rojo. Una columna de papeleras rojas es ruido, no un aviso; el rojo sale al apuntar, que es cuando sirve. La excepción va escrita como tal: lo que no se deshace (la purga de metadatos residuales) lleva la clase «siempre» y sigue en rojo desde el principio. En Bootstrap se reapuntan las variables del botón, como hace el contrato con .btn-primary. En Radzen, que pinta con cuatro clases y la sombra interior, la clase se repite para pesar más. ============================================================================================= */ .gt-borrar { --bs-btn-color: var(--gt-texto-suave); --bs-btn-border-color: var(--gt-borde); --bs-btn-bg: transparent; --bs-btn-hover-color: var(--gt-peligro-500); --bs-btn-hover-bg: var(--gt-peligro-suave); --bs-btn-hover-border-color: var(--gt-peligro-500); --bs-btn-active-color: var(--gt-peligro-500); --bs-btn-active-bg: var(--gt-peligro-suave); --bs-btn-active-border-color: var(--gt-peligro-500); --bs-btn-focus-shadow-rgb: 179, 38, 30; } .btn-link.gt-borrar { --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; text-decoration: none; } .rz-button.gt-borrar.gt-borrar.gt-borrar { background: none; box-shadow: none; color: var(--gt-texto-suave); } .rz-button.gt-borrar.gt-borrar.gt-borrar:hover, .rz-button.gt-borrar.gt-borrar.gt-borrar:focus-visible { background: var(--gt-peligro-suave); color: var(--gt-peligro-500); } /* ============================================================================================= EL «···» DE LAS FILAS (principio 7.6), lo que DOC añade al del contrato Shared/MenuDeAcciones.razor usa .gt-mas, .gt-accion.mas y .gt-mas-menu del contrato. Aquí va lo que el contrato deja a cada producto: dónde se abre el menú (debajo del botón y, en la última columna, hacia la izquierda para no salirse), una capa invisible detrás que lo cierra al tocar fuera. Los puntos son el ícono «mas-acciones» de Común. ============================================================================================= */ .gt-mas-menu { top: 100%; left: 0; text-align: left; white-space: nowrap; } .gt-mas-menu.gt-mas-izquierda { left: auto; right: 0; } .gt-mas-fondo { position: fixed; inset: 0; z-index: 1199; } .gt-mas-menu .btn-link { justify-content: flex-start; } /* ============================================================================================= LO QUE ESTABA ESCRITO EN LÍNEA (principio 5.5) Los tamaños de letra: 34 style="font-size:…" (0,65 rem a 14 px, ocho valores distintos) pasan a dos pasos de la escala del contrato. Lo que estaba en 13 px o menos es la letra de etiquetas y pies (12 px); lo de 14 px, el secundario. Los colores del grafo de relaciones: el punto de partida, lo declarado, lo pendiente y lo anulado salen de la paleta de gráficos del contrato (validada para daltonismo), no de cuatro hexadecimales en la pantalla. ============================================================================================= */ .gt-texto-xs { font-size: var(--gt-texto-xs); } .gt-texto-sm { font-size: var(--gt-texto-sm); } :root { --gt-grafo-raiz: var(--rz-series-1); --gt-grafo-declarado: var(--rz-series-2); --gt-grafo-pendiente: var(--rz-series-3); --gt-grafo-anulado: var(--gt-gris-400); } /* ============================================================================================= LA BARRA SUPERIOR EN EL TELÉFONO (móvil primero, 6.7) Medido a 375 px el 2026-10-27: el botón de menú, el selector de empresa, el idioma, la ayuda, la campana, el avatar, el nombre y «Salir» se apretaban en una fila; el nombre de la empresa salía partido en cinco renglones dentro de un selector de 30 px y el contenido empezaba en el píxel 382. En el teléfono: el menú a la izquierda y los íconos a la derecha en la primera fila; el selector de empresa, a lo ancho en la segunda; el nombre de la persona y el de la empresa no se escriben (el avatar y el selector ya los dicen). Desde sm (640 px) vuelve todo a una fila. ============================================================================================= */ .top-row .user-info { flex-wrap: wrap; justify-content: flex-end; min-width: 0; } .top-row .user-info .empresa-activa { order: 10; flex: 1 1 100%; } .top-row .user-info .empresa-activa .form-select { width: 100%; } .top-row .user-info .nombre-usuario, .top-row .user-info .nombre-empresa { display: none; } @media (min-width: 640px) { .top-row .user-info { flex-wrap: nowrap; } .top-row .user-info .empresa-activa { order: 0; flex: 0 1 auto; margin-right: var(--gt-esp-2); } .top-row .user-info .empresa-activa .form-select { width: auto; max-width: 18rem; } .top-row .user-info .nombre-usuario, .top-row .user-info .nombre-empresa { display: inline; } } /* ============================================================================================= LOS ÍCONOS DE COMÚN EN DOC (principio 8) de GTECH.Comun.Web, con su fuente (Material Symbols recortada, peso 300). - El acento en un ícono de título, que estaba escrito en línea en 30 pantallas (style="color:var(--gt-primary)"), es una clase. - En el menú, el ícono va a 20 px, el de las filas (8.3); los de Font Awesome que quedan, sin equivalente todavía, siguen a su tamaño. ============================================================================================= */ .gt-color-acento { color: var(--gt-acento); } /* El tamaño (20 px) lo da la clase de Común gt-icono-fila, puesta en cada ícono de NavMenu: aquí ya no se escribe. */ /* El ícono que gira mientras algo carga (antes fa-spin): una vuelta por segundo. Quien pidió menos movimiento no lo ve girar: el contrato acorta toda animación con prefers-reduced-motion. */ @keyframes gt-girar { to { transform: rotate(360deg); } } .gt-girar { animation: gt-girar 1s linear infinite; } /* ============================================================================================= LA SEDE ELECTRÓNICA EN NIVEL AAA (matriz EAAB 9.16; informe en docs/evidencias) La sede pide 7:1 (WCAG 1.4.6) y el contrato está hecho para 4,5:1: el acento (#00706a) da 5,6:1 sobre el fondo y el texto suave 6,6:1. Estos son los tonos de la sede, que se escogieron para llegar a 7:1 sobre el fondo y sobre blanco; antes estaban escritos en app.css y en la hoja de LayoutSede. Las reglas que los usan siguen en app.css («.sede»), ya sin un hexadecimal. Los nombres de DOC y de Bootstrap que en :root ya quedaron resueltos (apuntan a --tinta-suave o a --gt-texto-suave) se vuelven a dar aquí: una variable se resuelve donde se declara. ============================================================================================= */ .sede { --doc-sede-cabecera: #0d3a1f; /* la banda de arriba: blanco encima 12,8:1 */ --doc-sede-texto-suave: #3f4b57; /* 8,3:1 sobre el fondo, 9:1 sobre blanco */ --doc-sede-acento: #0b5a54; /* 7,5:1; blanco encima 8,1:1 */ --doc-sede-acento-hover: #073d39; --doc-sede-acento-activo: #052e2b; --doc-sede-info: #0c4a5e; /* el texto de cada aviso sobre su fondo: 8 a 9,4:1 */ --doc-sede-aviso: #5c3a06; --doc-sede-exito: #0b4a2d; --doc-sede-peligro: #7a1212; --tinta-suave: var(--doc-sede-texto-suave); --gt-texto-suave: var(--doc-sede-texto-suave); --marca: var(--doc-sede-acento); --marca-texto: var(--doc-sede-acento); --gt-primary: var(--doc-sede-acento); --bs-primary: var(--doc-sede-acento); --bs-primary-rgb: 11, 90, 84; --bs-link-color: var(--doc-sede-acento); --bs-link-color-rgb: 11, 90, 84; --bs-link-hover-color: var(--doc-sede-acento-hover); --bs-secondary-color: var(--doc-sede-texto-suave); --bs-secondary-rgb: 63, 75, 87; --bs-emphasis-color: var(--gt-texto); --gt-text-secondary: var(--doc-sede-texto-suave); --gt-text-muted: var(--doc-sede-texto-suave); --gt-sidebar-text: var(--doc-sede-texto-suave); --gt-sidebar-muted: var(--doc-sede-texto-suave); --gt-primary-dark: var(--doc-sede-acento-hover); --sobre-marca-clara: var(--doc-sede-acento-hover); } /* 2.4.13: el foco se ve también sobre la cabecera oscura. El contorno de la suite (app.css) se pinta con var(--foco): aquí dentro, en el color del texto de la banda. Así no hace falta otro !important para ganarle al del contorno. */ .sede-cabecera { --foco: var(--gt-menu-texto); } /* ============================================================================================= EL VELO DE LOS DIÁLOGOS (principio 5.5 y 9.3) 34 diálogos de Bootstrap abiertos a mano (class="modal d-block") llevaban el velo escrito en línea, style="background:rgba(0,0,0,.4)". Es el mismo oscurecido de toda la suite: --gt-velo del contrato. ============================================================================================= */ .gt-velo-modal { background: var(--gt-velo); } /* ============================================================================================= EL MAPA DE UN PROCESO (Shared/DiagramaDeProceso) Los colores del SVG estaban escritos en la pantalla (14 hexadecimales de Tailwind). Van por su significado: el paso donde está el caso, el acento; el escogido en el modelador, el foco; lo recorrido y el inicio, el éxito; el fin, el rojo oscuro; las devoluciones, el ámbar del aviso. En SVG, la propiedad de CSS le gana al atributo (fill="…"), y el atributo no acepta var(). ============================================================================================= */ .gt-mapa .flecha { fill: var(--gt-secundario); } .gt-mapa .flecha-devolucion { fill: var(--gt-aviso-500); } .gt-mapa .linea { stroke: var(--gt-borde-fuerte); } .gt-mapa .linea-devolucion { stroke: var(--gt-aviso-500); } .gt-mapa .etiqueta-devolucion { fill: var(--gt-aviso-500); } .gt-mapa .texto { fill: var(--gt-texto); } .gt-mapa .texto-suave { fill: var(--gt-texto-suave); } .gt-mapa .relleno { fill: var(--gt-superficie); } .gt-mapa .relleno-actual { fill: var(--gt-acento-suave); } .gt-mapa .relleno-recorrido { fill: var(--gt-exito-suave); } .gt-mapa .borde { stroke: var(--gt-secundario); } .gt-mapa .borde-actual { stroke: var(--gt-acento); } .gt-mapa .borde-escogido { stroke: var(--gt-foco); } .gt-mapa .inicio { fill: var(--gt-exito-suave); stroke: var(--gt-exito-500); } .gt-mapa .fin { stroke: var(--doc-peligro-texto); }