/* ============================================================================
eTradie - TIPOGRAFIA
Roboto local + escala de tamanos
----------------------------------------------------------------------------
POR QUE ESTE ARCHIVO EXISTE
etradie.css pesa ~900 KB y mezcla la plantilla base con el design system.
Modificarlo ahi haria el cambio dificil de revertir y de auditar.
Este archivo se carga DESPUES y solo redefine tipografia: quitar su
deja el sistema exactamente como estaba.
QUE SE ENCONTRO AL AUDITAR
El CSS tenia dos capas de tipografia y NINGUNA se estaba viendo:
Plantilla base (linea 108): stack del sistema
-apple-system, Segoe UI, Roboto, ... -> en Windows caia en Segoe UI
Design system eTradie (linea 18482):
--font: 'Plus Jakarta Sans', 'DM Sans', sans-serif
Ninguna pantalla cargaba esa fuente, asi que caia al sans-serif
generico del navegador.
O sea que el sistema nunca mostro la tipografia que su propio design
system declaraba. Con Roboto local eso queda resuelto: la fuente viaja
con la aplicacion y no depende de que este instalada ni de Google Fonts.
FUENTES VARIABLES
Roboto.ttf y Roboto-Italic.ttf son variable fonts: un solo archivo cubre
todos los pesos de 100 a 900. Por eso el font-weight del @font-face
declara el rango completo en vez de una entrada por peso.
format('truetype-variations') es lo que le dice al navegador que puede
interpolar pesos intermedios.
ESCALA
body de 16 a 17px. Los componentes que ya usan rem escalan solos; los
que tienen px fijo se ajustan puntualmente mas abajo.
NO se aplico un factor global (por ejemplo 1.08 a todo) porque
descuadraria tarjetas y tablas con anchos calculados en px.
============================================================================ */
/* ============================================================================
1. LA FUENTE
Los archivos viven en wwwroot, al lado de los HTML, asi que la ruta es
relativa simple.
============================================================================ */
@font-face {
font-family: 'Roboto';
src: url('Roboto.ttf') format('truetype-variations'),
url('Roboto.ttf') format('truetype');
font-weight: 100 900;
font-style: normal;
font-display: swap; /* el texto se ve de inmediato con la de respaldo */
}
@font-face {
font-family: 'Roboto';
src: url('Roboto-Italic.ttf') format('truetype-variations'),
url('Roboto-Italic.ttf') format('truetype');
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
/* ============================================================================
2. VARIABLE DEL DESIGN SYSTEM
Es el punto de entrada real: todos los componentes de eDS usan var(--font).
Cambiarla aqui alcanza a las 38 pantallas sin tocar ninguna.
============================================================================ */
:root {
--font: 'Roboto', -apple-system, 'Segoe UI', sans-serif;
--font-family-sans-serif: 'Roboto', -apple-system, 'Segoe UI', sans-serif;
/* Escala tipografica del sistema. Se declaran como variables para que un
ajuste futuro sea un solo cambio y no una busqueda por todo el CSS. */
--et-fs-base: 18px; /* texto de lectura */
--et-fs-sm: 14.5px; /* tablas, listas densas */
--et-fs-xs: 13px; /* metadatos, subtitulos de tarjeta */
--et-fs-label: 12px; /* etiquetas en mayusculas */
}
/* ============================================================================
3. BASE
============================================================================ */
html {
font-size: var(--et-fs-base);
}
body,
body.main-body,
.main-content,
.inner-body {
font-family: var(--font);
font-size: var(--et-fs-base);
}
/* SUAVIZADO DE TEXTO -- SOLO EN PANTALLAS DE ALTA DENSIDAD.
-webkit-font-smoothing:antialiased apaga el renderizado por subpixel del
navegador. En pantallas Retina o 4K eso limpia el texto; en un monitor
normal (1x) hace lo contrario: adelgaza los trazos y el texto se ve
difuso, como desenfocado. Se noto revisando un modal, pero afectaba a
TODA la plataforma -- el fondo oscuro del modal solo lo hizo evidente.
Con la media query, cada pantalla recibe lo que le conviene: suavizado
donde ayuda, renderizado nativo donde el suavizado estorba. */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
body,
body.main-body,
.main-content,
.inner-body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
/* Elementos de formulario NO heredan la fuente por omision en todos los
navegadores: hay que decirlo explicitamente o los inputs se ven distintos
al resto de la pagina. */
input, select, textarea, button,
.form-control, .btn {
font-family: var(--font);
}
/* ============================================================================
4. COMPONENTES CON TAMANO FIJO
Se suben los que estaban en px pequenos. Los valores respetan la jerarquia
original: lo que era mas chico sigue siendo mas chico.
============================================================================ */
/* Tablas: es donde mas se lee en este sistema */
.table,
.table th,
.table td {
font-size: var(--et-fs-sm);
}
.table thead th {
font-size: var(--et-fs-label);
letter-spacing: .03em;
}
/* Tarjetas de KPI */
.et-kpi-lbl { font-size: var(--et-fs-label) }
.et-kpi-val { font-size: 28px }
.et-kpi-sub { font-size: var(--et-fs-xs) }
/* Accesos del hub.
Las tarjetas tienen min-width:220px fijo en etradie.css. Con la tipografia
nueva el texto ya no cabe en ese ancho y la descripcion se parte en cuatro
lineas, dejando las tarjetas desparejas. Se ensancha la base y se aprieta
el interlineado de la descripcion, que estaba en 1.5 -- generoso para un
texto de apoyo. */
.et-acceso { flex: 1 1 285px; min-width: 285px }
.et-acceso-titulo { font-size: 15px; line-height: 1.3 }
.et-acceso-desc { font-size: 12.5px; line-height: 1.45 }
/* Filtros y formularios */
.et-field label,
.main-content-label {
font-size: var(--et-fs-label);
}
.form-control {
font-size: var(--et-fs-sm);
}
.form-control-sm {
font-size: 13.5px;
}
/* Utilidades de la plantilla que se usan en el modulo */
.tx-11 { font-size: 12.5px !important }
.tx-12 { font-size: 13.5px !important }
.tx-13 { font-size: 14.5px !important }
.tx-14 { font-size: 15.5px !important }
/* Titulos */
.main-content-title { font-size: 27px }
.card-title { font-size: 16px }
.breadcrumb-item { font-size: 13.5px }
/* Modales */
.modal-hd h3 { font-size: 18px }
/* Botones: se suben ligeramente para acompanar al texto */
.btn { font-size: var(--et-fs-sm) }
.btn-sm { font-size: 13.5px }
/* Badges y etiquetas pequenas se dejan casi igual: subirlas rompe el alto
de las filas de tabla donde viven. */
.badge { font-size: 12px }
/* ============================================================================
5. PANTALLAS DEL MODULO
Clases propias de las pantallas construidas en esta linea de trabajo.
============================================================================ */
.reactivo-txt,
.comp-conductas li,
.bib-desc,
.esc-guia-txt,
.opc-row,
.grp-meta {
font-size: 14px;
}
.comp-requiere,
.esc-leyenda,
.gap-nota,
.pdi-nota,
.cur-aviso,
.lms-aviso {
font-size: 13.5px;
}
/* ============================================================================
6. IMPRESION
En papel se lee distinto: se baja un punto para que quepa lo mismo que
antes en una hoja carta.
============================================================================ */
@media print {
html, body { font-size: 16px }
.table, .table th, .table td { font-size: 13px }
}
/* ============================================================================
7. REFINAMIENTO VISUAL
----------------------------------------------------------------------------
CRITERIO
Color con funcion, no de relleno. Los sistemas B2B que se ven serios usan
el color para senalar estado y jerarquia, no para decorar. Todo lo de
abajo usa tokens que YA existen en etradie.css -- incluido el acento
naranja #FF5F00, que estaba definido y casi sin usar.
Nada cambia de tamano ni de posicion: son bordes, fondos y transiciones.
Si algo no convence, se borra esta seccion y el resto sigue funcionando.
============================================================================ */
/* ---------------------------------------------------------------------------
7.1 KPIs
Tenian una franja de color arriba. Se refuerza con un fondo degradado muy
sutil hacia el color del estado, para que el ojo distinga de un vistazo un
KPI en rojo de uno en verde sin tener que leer el numero.
--------------------------------------------------------------------------- */
.et-kpi {
position: relative;
overflow: hidden;
transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease;
}
.et-kpi:hover {
transform: translateY(-2px);
box-shadow: var(--et-shadow);
}
.et-kpi-danger { background: linear-gradient(160deg, rgba(224,68,91,.05) 0%, var(--et-surface) 55%) }
.et-kpi-success { background: linear-gradient(160deg, rgba(15,169,104,.05) 0%, var(--et-surface) 55%) }
.et-kpi-warning { background: linear-gradient(160deg, rgba(232,163,61,.06) 0%, var(--et-surface) 55%) }
.et-kpi-info { background: linear-gradient(160deg, rgba(59,130,196,.05) 0%, var(--et-surface) 55%) }
.et-kpi-accent { background: linear-gradient(160deg, rgba(255,95,0,.045) 0%, var(--et-surface) 55%) }
/* El icono del KPI toma el color de su estado en vez de quedarse neutro. */
.et-kpi-danger .et-kpi-ico { background: rgba(224,68,91,.12); color: var(--et-danger) }
.et-kpi-success .et-kpi-ico { background: rgba(15,169,104,.12); color: var(--et-success) }
.et-kpi-warning .et-kpi-ico { background: rgba(232,163,61,.14); color: var(--et-warning) }
.et-kpi-info .et-kpi-ico { background: rgba(59,130,196,.12); color: var(--et-info) }
.et-kpi-accent .et-kpi-ico { background: var(--et-accent-50); color: var(--et-accent) }
.et-kpi-val { letter-spacing: -.02em }
/* ---------------------------------------------------------------------------
7.2 Tarjetas de acceso del hub
El icono era plano. Al pasar el cursor toma el acento y se levanta, que es
la senal de "esto es navegable".
--------------------------------------------------------------------------- */
.et-acceso-ico {
transition: background .18s ease, color .18s ease, transform .18s ease;
}
.et-acceso:hover .et-acceso-ico { transform: scale(1.06) }
.et-acceso:hover .et-acceso-titulo { color: var(--et-primary) }
/* ---------------------------------------------------------------------------
7.3 Tablas
El encabezado azul solido es pesado sobre fondo claro. Se cambia por un
fondo tenue con texto oscuro: se lee mejor y pesa menos visualmente.
La fila se resalta al pasar el cursor, que ayuda a seguir el renglon en
tablas anchas como el reporte de brechas.
--------------------------------------------------------------------------- */
/* NO se toca el fondo del encabezado: el degradado azul solido es identidad
visual de eTradie y se ve igual en Facturacion, CRM y el resto de modulos.
En una version anterior de este archivo se cambio a fondo tenue "para que
pesara menos", y el resultado fue que las pantallas de RH parecian otra
aplicacion. Solo se ajusta la tipografia del encabezado. */
.table thead th,
.table thead.bg-primary th {
font-weight: 700;
letter-spacing: .04em;
}
/* Un thead SIN clase -- como el de las tablas dentro de modales -- heredaba un
gris muy claro de la plantilla y sus titulos no se leian sobre el fondo.
Los que llevan bg-primary quedan intactos: ese es el azul de identidad. */
.table thead:not(.bg-primary) th {
color: var(--et-ink-soft);
background: var(--et-surface-2);
border-bottom: 2px solid var(--et-line);
text-transform: uppercase;
font-size: var(--et-fs-label);
}
.et-table-hover tbody tr {
transition: background .12s ease;
}
.et-table-hover tbody tr:hover {
background: var(--et-primary-50) !important;
}
/* La clase .clickable marca filas y tarjetas que abren un detalle. Es
convencion del sistema: en la mayoria de las pantallas se hace clic en la
fila, no en un boton "Editar". Solo tenia cursor:pointer, asi que no se
percibia que fuera accionable hasta pasar el cursor por encima. */
tr.clickable:hover,
.esc-card.clickable:hover,
.bib-item.clickable:hover {
background: var(--et-primary-50);
}
.esc-card.clickable, .bib-item.clickable { cursor: pointer }
/* Franja izquierda que aparece al pasar el cursor: orienta en tablas largas */
.et-table-hover tbody tr td:first-child {
box-shadow: inset 3px 0 0 transparent;
transition: box-shadow .12s ease;
}
.et-table-hover tbody tr:hover td:first-child {
box-shadow: inset 3px 0 0 var(--et-primary);
}
/* ---------------------------------------------------------------------------
7.4 Botones
Se les da profundidad al presionar en vez de un cambio plano de color.
--------------------------------------------------------------------------- */
.btn {
transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
font-weight: 600;
}
.btn:active { transform: translateY(1px) }
.btn-ev-primary {
box-shadow: 0 1px 2px rgba(42,59,110,.16), 0 2px 8px rgba(42,59,110,.12);
}
.btn-ev-primary:hover {
box-shadow: 0 2px 6px rgba(42,59,110,.22), 0 6px 16px rgba(42,59,110,.18);
}
/* ---------------------------------------------------------------------------
7.5 Encabezado de pagina
El titulo llevaba una linea sin peso. Se le pone una barra de acento a la
izquierda: da un punto de anclaje visual a cada pantalla.
--------------------------------------------------------------------------- */
.page-header .main-content-title {
position: relative;
padding-left: 14px;
letter-spacing: -.015em;
}
.page-header .main-content-title::before {
content: '';
position: absolute;
left: 0; top: 50%;
transform: translateY(-50%);
width: 4px; height: 76%;
border-radius: 2px;
background: linear-gradient(180deg, var(--et-primary) 0%, var(--et-accent) 100%);
}
.breadcrumb { padding-left: 14px }
/* ---------------------------------------------------------------------------
7.6 Tarjetas
Sombra mas suave en reposo y algo mas presente al pasar el cursor.
--------------------------------------------------------------------------- */
.card.custom-card {
border: 1px solid var(--et-line);
box-shadow: var(--et-shadow-sm);
transition: box-shadow .2s ease;
}
.card.custom-card:hover { box-shadow: var(--et-shadow) }
.card-header {
background: transparent;
border-bottom: 1px solid var(--et-line);
}
/* ---------------------------------------------------------------------------
7.7 Campos de formulario
El foco marcaba poco. Con un halo del color primario se ve de inmediato
donde esta el cursor, que importa en formularios largos como el de
responder evaluacion.
--------------------------------------------------------------------------- */
.form-control {
border-color: var(--et-line);
transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
border-color: var(--et-primary);
box-shadow: 0 0 0 3px rgba(42,59,110,.10);
}
/* ---------------------------------------------------------------------------
7.8 Badges y avisos
Los badges solidos de color saturado cansan en tablas densas. Se cambian
por fondo tenue con texto del color, que es mas legible.
--------------------------------------------------------------------------- */
.et-notice {
border-radius: var(--et-radius-sm);
border-left-width: 3px;
border-left-style: solid;
}
.et-notice-info { background: var(--et-primary-50); border-left-color: var(--et-primary); color: var(--et-ink) }
.et-notice-warning { background: rgba(232,163,61,.10); border-left-color: var(--et-warning); color: var(--et-ink) }
/* ---------------------------------------------------------------------------
7.9 Barras de progreso
Degradado en vez de color plano: se percibe el avance con mas claridad.
--------------------------------------------------------------------------- */
.gap-bar i,
.pdi-prog i {
background: linear-gradient(90deg, var(--et-danger) 0%, #F2705F 100%);
}
.pdi-prog:not(.tarde) i {
background: linear-gradient(90deg, var(--et-success) 0%, #3FC98A 100%);
}
/* ---------------------------------------------------------------------------
7.10 Barra lateral de resultado
La escala de la pantalla de responder gana un poco de peso al seleccionar.
--------------------------------------------------------------------------- */
.escala-opt.selected {
box-shadow: 0 2px 8px rgba(42,59,110,.28);
}
/* ---------------------------------------------------------------------------
7.11 Scrollbar
Detalle chico que se nota: la barra por omision de Windows desentona con
el resto de la interfaz.
--------------------------------------------------------------------------- */
* {
scrollbar-width: thin;
scrollbar-color: var(--et-primary-300) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px }
*::-webkit-scrollbar-track { background: transparent }
*::-webkit-scrollbar-thumb {
background: var(--et-primary-300);
border-radius: 999px;
border: 3px solid var(--et-bg);
}
*::-webkit-scrollbar-thumb:hover { background: var(--et-primary) }
/* ---------------------------------------------------------------------------
7.12 Preferencia de movimiento reducido
Quien tenga activada esa opcion del sistema operativo no deberia recibir
animaciones. Es accesibilidad basica y cuesta cinco lineas.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}
/* ============================================================================
8. COLOR EN LOS DATOS Y EN LOS MOMENTOS
----------------------------------------------------------------------------
CRITERIO
El color aqui NO es decoracion: senala estado, magnitud y transicion.
Un sistema donde se pasan ocho horas cansa por friccion, no por falta de
color -- pero un sistema donde nada responde al clic y donde terminar una
tarea larga no se siente distinto a fallar, tampoco engancha.
Esta seccion ataca tres momentos: cuando no hay datos, cuando se
completa algo, y cuando hay que leer una cifra.
============================================================================ */
/* ---------------------------------------------------------------------------
8.1 ESTADOS VACIOS
Eran texto gris con un icono al 50% de opacidad. Un estado vacio es la
primera pantalla que ve un cliente nuevo en cada modulo: si se ve muerta,
el sistema parece roto en vez de recien instalado.
--------------------------------------------------------------------------- */
.et-empty {
padding: 40px 24px;
position: relative;
}
.et-empty i {
font-size: 30px;
opacity: 1;
color: var(--et-primary-300);
background: var(--et-primary-50);
width: 68px; height: 68px;
line-height: 68px;
border-radius: 50%;
margin: 0 auto 14px;
transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.et-empty:hover i { transform: scale(1.05) }
/* Variante de exito: cuando el vacio es una buena noticia -- "ninguna accion
atrasada", "sin alertas abiertas". Hoy se veia igual que un error. */
.et-empty i.fa-check-circle,
.et-empty i.fa-check-double {
color: var(--et-success);
background: rgba(15,169,104,.10);
}
/* Variante de problema real */
.et-empty i.fa-plug,
.et-empty i.fa-exclamation-triangle {
color: var(--et-danger);
background: rgba(224,68,91,.10);
}
/* ---------------------------------------------------------------------------
8.2 TOASTS
Entraban sin transicion y todos se veian igual. Ahora deslizan desde la
derecha y llevan una barra de progreso que muestra cuanto falta para que
desaparezcan -- asi nadie se queda esperando a ver si el mensaje sigue.
--------------------------------------------------------------------------- */
.et-toast {
animation: et-toast-in .28s cubic-bezier(.2,.8,.2,1);
position: relative;
overflow: hidden;
border-left: 3px solid var(--et-info);
box-shadow: var(--et-shadow);
}
.et-toast.ok { border-left-color: var(--et-success) }
.et-toast.err { border-left-color: var(--et-danger) }
.et-toast::after {
content: '';
position: absolute;
left: 0; bottom: 0; height: 2px;
background: currentColor;
opacity: .35;
animation: et-toast-bar 3.2s linear forwards;
}
@keyframes et-toast-in {
from { opacity: 0; transform: translateX(24px) }
to { opacity: 1; transform: translateX(0) }
}
@keyframes et-toast-bar {
from { width: 100% }
to { width: 0 }
}
/* ---------------------------------------------------------------------------
8.3 CIFRAS QUE COMUNICAN
Las brechas negativas y positivas ya salian en rojo y verde. Se refuerzan
con fondo tenue y tabular-nums, que alinea los digitos en columna: en una
tabla de brechas eso hace que -1.11 y -0.33 se comparen de un vistazo.
--------------------------------------------------------------------------- */
.brecha-neg, .brecha-ok, .pdi-tarde, .pdi-ok,
.et-kpi-val, .table td {
font-variant-numeric: tabular-nums;
}
.brecha-neg, .pdi-tarde {
background: rgba(224,68,91,.10);
border-radius: 6px;
padding: 1px 7px;
}
.brecha-ok, .pdi-ok {
background: rgba(15,169,104,.10);
border-radius: 6px;
padding: 1px 7px;
}
/* ---------------------------------------------------------------------------
8.4 PROGRESO
La barra de avance de la evaluacion era una linea plana. Con degradado y
transicion, cada respuesta que se marca se ve avanzar.
--------------------------------------------------------------------------- */
.hd-barra, #hd-barra {
background: linear-gradient(90deg, var(--et-primary) 0%, var(--et-accent) 100%);
transition: width .35s cubic-bezier(.2,.8,.2,1);
border-radius: 999px;
}
/* Tarjeta de competencia completada: el borde verde ya existia, se le suma
un fondo apenas perceptible para que el avance se vea al hacer scroll. */
.comp-card.completa {
background: linear-gradient(90deg, rgba(15,169,104,.04) 0%, var(--et-surface) 40%);
}
/* ---------------------------------------------------------------------------
8.5 SKELETONS
El esqueleto de carga era un bloque gris fijo. Con brillo en movimiento se
percibe que el sistema esta trabajando, no colgado.
--------------------------------------------------------------------------- */
.et-skeleton {
background: linear-gradient(90deg,
var(--et-line) 25%, #EFF2F8 50%, var(--et-line) 75%);
background-size: 200% 100%;
animation: et-shimmer 1.4s ease-in-out infinite;
}
@keyframes et-shimmer {
from { background-position: 200% 0 }
to { background-position: -200% 0 }
}
/* ---------------------------------------------------------------------------
8.6 ENTRADA DE CONTENIDO
Las tarjetas y filas aparecen con un desvanecido corto. Es la diferencia
entre que el contenido "aparezca de golpe" y que se sienta que llego.
--------------------------------------------------------------------------- */
.et-kpi, .comp-card, .esc-card, .bib-item {
animation: et-fade-up .32s cubic-bezier(.2,.8,.2,1) backwards;
}
.et-kpi:nth-child(2) { animation-delay: .04s }
.et-kpi:nth-child(3) { animation-delay: .08s }
.et-kpi:nth-child(4) { animation-delay: .12s }
.et-kpi:nth-child(5) { animation-delay: .16s }
.et-kpi:nth-child(6) { animation-delay: .20s }
@keyframes et-fade-up {
from { opacity: 0; transform: translateY(8px) }
to { opacity: 1; transform: translateY(0) }
}
/* ---------------------------------------------------------------------------
8.7 BADGES DE ESTADO
Los badges solidos de color saturado se leen mal en tablas densas. Fondo
tenue con texto del color: mismo significado, menos ruido.
--------------------------------------------------------------------------- */
.gap-prelim, .pdi-tag, .comp-tag-eval, .comp-tag-guia,
.lms-tag, .bib-tag, .esc-tag, .grp-tag, .cur-comp {
letter-spacing: .04em;
font-variant-numeric: tabular-nums;
}
/* ---------------------------------------------------------------------------
8.8 FOCO VISIBLE PARA TECLADO
Quien navega con tabulador no tenia senal clara de donde esta. Es
accesibilidad, y ademas hace que el sistema se sienta mas solido.
--------------------------------------------------------------------------- */
a:focus-visible, button:focus-visible,
.et-acceso:focus-visible, .escala-opt:focus-visible {
outline: 2px solid var(--et-accent);
outline-offset: 2px;
border-radius: var(--et-radius-sm);
}
/* ============================================================================
9. GRAFICOS DEL MODULO DE COMPETENCIAS
SVG propio, sin libreria externa. Ver ev_charts.js.
============================================================================ */
.ev-radar-wrap { text-align:center }
.ev-radar { width:100%; max-width:460px; height:auto; display:block; margin:0 auto }
.ev-radar-leyenda { display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:center;
margin-top:10px; font-size:12.5px; color:var(--et-ink-soft) }
.ev-rl-item { display:inline-flex; align-items:center; gap:6px }
.ev-rl-item b { color:var(--et-ink); font-variant-numeric:tabular-nums }
.ev-rl-n { color:var(--et-ink-muted); font-size:11.5px }
.ev-rl-punto { width:10px; height:10px; border-radius:50%; display:inline-block }
.ev-rl-linea { width:16px; height:0; border-top:2px dashed; display:inline-block }
.ev-rl-oculto { color:var(--et-ink-muted); cursor:help }
.ev-radar-notas { margin-top:10px; font-size:12px; color:var(--et-ink-soft);
text-align:left; background:var(--et-surface-2);
border-radius:var(--et-radius-sm); padding:9px 11px; line-height:1.45 }
.ev-radar-notas div + div { margin-top:5px }
/* Las barras de brecha viven en cada reporte (ev_gap_report, ev_pdi_compliance):
no se centralizaron aqui para no duplicar las que ya existian. */
/* En impresion el radar debe conservar sus colores: es el grafico que RH
comparte en PDF con el colaborador. */
@media print {
.ev-radar { max-width:380px }
.ev-radar-wrap { -webkit-print-color-adjust:exact; print-color-adjust:exact }
}
/* ============================================================================
10. BLINDAJE DEL AVISO EN PANTALLA
----------------------------------------------------------------------------
POR QUE
Los avisos .et-notice se insertaron en 92 pantallas con tres arquitecturas
distintas. En cuatro de ellas cayeron dentro de un contenedor con
display:flex -- la barra de filtros, por ejemplo -- y en vez de quedar
como bloque debajo del encabezado se colocaron como COLUMNA a un lado,
desbordando el ancho de la pagina.
Esas cuatro se reubicaron una por una, pero corregir el HTML no protege
contra el mismo error en la proxima pantalla que se agregue. Estas reglas
hacen que el aviso se comporte bien aunque su posicion sea la equivocada.
QUE HACEN
flex-basis 100% obliga a ocupar el renglon completo dentro de un flex.
min-width 0 permite que el texto se corte en vez de empujar el contenedor.
overflow-wrap parte palabras largas -- URLs, claves -- en lugar de
desbordar.
============================================================================ */
.et-notice {
flex: 1 1 100%;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
overflow-wrap: anywhere;
}
/* El texto del aviso tambien puede desbordar si trae una palabra larga. */
.et-notice > span,
.et-notice > div {
min-width: 0;
overflow-wrap: anywhere;
}
/* El icono no debe encogerse ni estirarse: es ancho fijo. */
.et-notice > i {
flex: 0 0 auto;
margin-top: 2px;
}
/* Dentro de una barra de filtros el aviso rompe el renglon en vez de
competir por espacio con los controles. */
.et-filtros .et-notice {
order: 99;
margin-top: 10px;
margin-bottom: 0;
}
/* ============================================================================
11. FOCO EN ELEMENTOS NO INTERACTIVOS
----------------------------------------------------------------------------
Una etiqueta de brecha o un badge dentro de una fila clickeable recibia el
contorno de foco al hacer clic y se quedaba con un borde negro, como si
fuera un control seleccionado. El foco visible debe estar en lo que
REALMENTE se puede accionar con el teclado: botones, enlaces y campos.
============================================================================ */
.gap-brecha:focus, .gap-brecha:focus-visible,
.brecha-badge:focus, .brecha-badge:focus-visible,
.et-kpi:focus, .et-kpi:focus-visible,
td:focus, td:focus-visible, tr:focus, tr:focus-visible,
span:not([tabindex]):focus, span:not([tabindex]):focus-visible {
outline: none;
box-shadow: none;
}
/* ============================================================================
12. ACCIONES DE INTELIGENCIA ARTIFICIAL
----------------------------------------------------------------------------
POR QUE UN COLOR PROPIO
Un boton que llama a un servicio de IA no es como los demas: tarda unos
segundos, depende de un tercero, consume tokens que alguien paga, y su
resultado es una PROPUESTA que hay que revisar, no un dato del sistema.
El usuario debe saber todo eso ANTES de hacer clic. Hoy un boton de IA se
ve igual que uno que guarda un registro.
POR QUE VIOLETA
Los seis colores del sistema ya cargan significado: verde es correcto,
rojo es error, ambar es advertencia, azul es informacion, naranja es el
elemento activo, y el azul marino es la marca.
El violeta es el unico hueco de la paleta sin uso previo. Eso es lo que
lo hace servible: no puede confundirse con un estado. Y coincide con la
convencion que el usuario ya vio en otras herramientas.
DONDE SE USA
Solo en acciones que REALMENTE llaman a un modelo. Usarlo de adorno en
una pantalla que no consume IA destruiria la senal: el color vale
mientras signifique una sola cosa.
============================================================================ */
:root {
--et-ia: #FF5F00;
--et-ia-dark: #E05500;
--et-ia-soft: rgba(255, 95, 0, .10);
--et-ia-line: rgba(255, 95, 0, .28);
}
.btn-ia {
background: var(--et-ia);
border: 1px solid var(--et-ia);
color: #fff;
}
.btn-ia:hover, .btn-ia:focus {
background: var(--et-ia-dark);
border-color: var(--et-ia-dark);
color: #fff;
}
.btn-ia:disabled { opacity: .55; cursor: not-allowed }
.btn-ia-outline {
background: transparent;
border: 1px solid var(--et-ia-line);
color: var(--et-ia);
}
.btn-ia-outline:hover, .btn-ia-outline:focus {
background: var(--et-ia-soft);
border-color: var(--et-ia);
color: var(--et-ia-dark);
}
.btn-ia-outline:disabled { opacity: .55; cursor: not-allowed }
/* El contenedor de un bloque de IA lleva el mismo codigo, para que el area
completa se lea como "esto lo genera un modelo" sin tener que decirlo. */
.et-ia-box {
background: var(--et-ia-soft);
border: 1px solid var(--et-ia-line);
border-radius: var(--et-radius-sm);
padding: 12px 14px;
}
.et-ia-hd {
display: flex; justify-content: space-between; align-items: center;
font-size: 12px; font-weight: 700; color: var(--et-ia); margin-bottom: 8px;
}
.et-ia-hd a { font-size: 11px; font-weight: 500; color: var(--et-ink-muted) }
/* Texto explicativo dentro de una caja de IA (el "Propone X a partir de...").
Faltaba en esta version de la seccion 12 -- sin ella, ese texto cae al
tamano por default del navegador en vez del tamano pensado para el
sistema. Usada por dp_editor.js, rec_openings.js, rec_candidate.js,
rec_pipeline.js y rec_settings.js. */
.ia-txt { font-size: 11.5px; color: var(--et-ink-muted); line-height: 1.45; margin: 0 0 8px }
/* Lo que devolvio el modelo. El borde lateral recuerda que es una propuesta
y no un dato del sistema. */
.et-ia-prop {
background: var(--et-surface);
border-left: 3px solid var(--et-ia);
border-radius: var(--et-radius-sm);
padding: 10px 12px; margin-top: 10px;
}
/* Marca discreta para un dato generado por IA dentro de una lista. */
.et-ia-tag {
display: inline-flex; align-items: center; gap: 4px;
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; color: var(--et-ia);
background: var(--et-ia-soft); border-radius: 9px; padding: 1px 7px;
}
/* ===========================================================================
MODALES .modal-bg / .modal (25/Ago/2026)
---------------------------------------------------------------------------
etradie.css trae TRES definiciones de .modal que compiten:
linea 5971 Bootstrap : position:fixed; top:0; left:0; width/height:100%
linea 14791 Spruha : lo mismo, z-index:9999
linea 20769 eDS : background, border-radius, display:flex, max-width
La de eDS gana por ser la ultima, pero no resetea position/top/left/height,
asi que el cuadro del modal conserva el position:fixed de Bootstrap y se
estira a toda la pantalla en vez de quedar como caja centrada.
Va aqui y no en etradie.css porque ese archivo se genera con el ensamblador
y no se parcha a mano (seccion 38.1 de las instrucciones maestras). Esta
hoja carga despues, asi que el resultado en pantalla es el mismo y el
rollback es quitar un .
Los !important son necesarios: pelean contra reglas de Bootstrap y Spruha
de la misma especificidad que aparecen antes en el archivo generado.
=========================================================================== */
.modal-bg {
position: fixed !important;
inset: 0 !important;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(0,0,0,.45);
z-index: 9000;
overflow-y: auto;
}
.modal-bg > .modal {
display: flex !important;
flex-direction: column;
position: relative !important;
top: auto !important;
left: auto !important;
width: 100%;
height: auto;
margin: auto;
max-height: 90vh;
}
/* Logos de terceros en SVG (etradie_iconos.js): se comportan como un
icono de Font Awesome mas en la fila. Vive aqui y no en un CSS de
modulo para que el tamano aplique en toda la plataforma. */
.ico-marca{width:1em;height:1em;vertical-align:-0.125em;display:inline-block}
/* ---------------------------------------------------------------------------
8.9 Botones secundarios: contorno visible
---------------------------------------------------------------------------
PROBLEMA: la plantilla base define .btn-light con border-color #f8f9fa, o
sea el MISMO gris que su fondo. El borde existe pero no se ve, asi que
"Volver" o "Guardar como borrador" se leen como texto suelto y no como
botones. En una pantalla que manda correos a cientos de personas, que un
control no parezca control es peligroso: la gente no lo pulsa, o pulsa el
equivocado porque es el unico que se ve.
Se corrige aqui --no en etradie.css, que esta congelado-- con el token de
linea del design system, para que el contorno sea el mismo de las tarjetas
y los campos. El fondo pasa a blanco: un boton secundario sobre fondo gris
claro se confunde con la tarjeta; sobre blanco con borde se lee como boton.
--------------------------------------------------------------------------- */
.btn-light,
.btn-outline-light {
background-color: var(--et-surface);
border: 1px solid var(--et-line);
color: var(--et-ink-soft);
}
.btn-light:hover,
.btn-outline-light:hover {
background-color: var(--et-surface-2);
border-color: var(--et-ink-muted);
color: var(--et-ink);
}
.btn-light:focus,
.btn-light.focus,
.btn-light:not(:disabled):not(.disabled):active {
background-color: var(--et-surface-2);
border-color: var(--et-primary);
color: var(--et-ink);
box-shadow: 0 0 0 3px var(--et-primary-50);
}
/* Deshabilitado: se distingue del activo sin desaparecer. Un boton que se
borra por completo deja al usuario sin saber que ahi habia una accion. */
.btn-light:disabled,
.btn-light.disabled {
background-color: var(--et-surface-2);
border-color: var(--et-line);
color: var(--et-ink-muted);
opacity: .7;
}
/* El principal tambien lleva borde, del mismo color que su fondo: sin el, los
dos botones tienen alturas distintas por un pixel y la fila se ve desalineada. */
.btn-primary {
border: 1px solid var(--et-primary);
}
.btn-primary:hover {
border-color: var(--et-primary-600);
}
/* Boton de solo texto: el unico que NO lleva contorno, a proposito. Es para
acciones terciarias --"me equivoque", "ver mas"-- que no deben competir con
las dos anteriores. */
.btn-texto,
.b-texto {
background: transparent;
border: 1px solid transparent;
color: var(--et-primary);
font-weight: 500;
text-decoration: underline;
}
.btn-texto:hover,
.b-texto:hover {
background: var(--et-primary-50);
border-color: transparent;
text-decoration: none;
}
/* Estados compartidos de RH, Tareas y Activo Fijo. */
.et-toast.et-toast-success,
.et-toast.et-toast-danger,
.et-toast.et-toast-warning,
.et-toast.et-toast-info{
background:var(--et-surface); color:var(--et-ink);
border:1px solid var(--et-line); border-left-width:4px;
align-items:flex-start; line-height:1.4;
}
.et-toast.et-toast-success{ border-left-color:var(--et-success); }
.et-toast.et-toast-success i{ color:var(--et-success); }
.et-toast.et-toast-danger { border-left-color:var(--et-danger); }
.et-toast.et-toast-danger i{ color:var(--et-danger); }
.et-toast.et-toast-warning{ border-left-color:var(--et-warning); }
.et-toast.et-toast-warning i{ color:var(--et-warning); }
.et-toast.et-toast-info { border-left-color:var(--et-info); }
.et-toast.et-toast-info i { color:var(--et-info); }
/* La barra de progreso de tipografia dura 3.2s; los toasts de error viven
mas tiempo a proposito, asi que ahi no se muestra para no prometer que
ya se va a ir. */
.et-toast.et-toast-danger::after{ display:none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
/* Acciones visibles al consultar tablas anchas. No cambia el orden de celdas. */
.table-responsive { max-width:100%; }
.table-responsive .et-grid-action { position:sticky; right:0; z-index:2; background:var(--et-surface); box-shadow:-3px 0 5px rgba(0,0,0,.06); }
.table-responsive thead .et-grid-action { z-index:3; background:var(--et-grid-hd-to,#17A2B8); }
.table-responsive td.et-grid-action { white-space:normal; min-width:90px; max-width:180px; }
.table-responsive td.et-grid-action .btn { white-space:normal; }
.et-native-date-wrap { display:inline-flex; position:relative; min-width:0; width:100%; align-items:center; }
.et-native-date-wrap .et-native-date-text { width:100%; min-width:110px; padding-right:36px; }
.et-native-date-wrap .et-native-date-picker { position:absolute; right:0; top:0; bottom:0; width:32px; min-width:0; opacity:0; cursor:pointer; z-index:1; }
.et-native-date-calendar { position:absolute; right:10px; color:var(--et-ink-muted); pointer-events:none; }
.et-native-date-wrap:focus-within { outline:2px solid var(--et-info); outline-offset:2px; border-radius:4px; }
/* Contener tablas sin ocultar datos ni convertir el body en una superficie de scroll. */
.et-grid-host { min-width:0; }
.et-grid-scroll { width:100%; min-width:0; overflow-x:auto; }
.et-grid-scroll:focus-visible { outline:2px solid var(--et-info); outline-offset:2px; }
@media print { .et-grid-scroll {overflow:visible;} .table-responsive .et-grid-action {position:static;box-shadow:none;} }
@media(max-width:640px) {
.et-kpi-hd {flex-wrap:wrap;gap:6px;}
.et-kpi-lbl {white-space:normal;overflow-wrap:anywhere;}
}
/* Tintes y contraste de estados derivados de la paleta eDS. */
:root {
--et-ai-accent:#FF6B00; --et-ai-soft:#FFF0E6;
--et-grid-hd-from:#4E73DF; --et-grid-hd-to:#17A2B8;
--et-success-soft:color-mix(in srgb,var(--et-success) 10%,var(--et-surface));
--et-success-line:color-mix(in srgb,var(--et-success) 28%,var(--et-surface));
--et-success-ink:color-mix(in srgb,var(--et-success) 55%,var(--et-ink));
--et-danger-soft:color-mix(in srgb,var(--et-danger) 10%,var(--et-surface));
--et-danger-line:color-mix(in srgb,var(--et-danger) 28%,var(--et-surface));
--et-danger-ink:color-mix(in srgb,var(--et-danger) 55%,var(--et-ink));
--et-warning-soft:color-mix(in srgb,var(--et-warning) 10%,var(--et-surface));
--et-warning-line:color-mix(in srgb,var(--et-warning) 28%,var(--et-surface));
--et-warning-ink:color-mix(in srgb,var(--et-warning) 55%,var(--et-ink));
--et-info-soft:color-mix(in srgb,var(--et-info) 10%,var(--et-surface));
--et-info-line:color-mix(in srgb,var(--et-info) 28%,var(--et-surface));
--et-info-ink:color-mix(in srgb,var(--et-info) 55%,var(--et-ink));
}