DataScope26/WEB

1.bar-graph-header {2    display: flex;3    align-items: center;4    justify-content: space-between;5    gap: 0.75rem;6    margin-bottom: 0.75rem;7}8 9.bar-graph-header-right {10    display: flex;11    align-items: center;12    gap: 0.625rem;13}14 15.bar-graph-format-toggle {16    display: flex;17    gap: 0.375rem;18}19 20.bar-graph-format-btn {21    display: flex;22    align-items: center;23    justify-content: center;24    width: 1.75rem;25    height: 1.75rem;26    border-radius: 0.375rem;27    background-color: #050505; /* negro por defecto (inactivo) */28    color: #ccc;29    transition: background-color 0.15s ease, color 0.15s ease;30    padding: 0%;31}32 33html[data-theme='light'] .bar-graph-format-btn {34    background-color: #e5e7eb;35    color: #6b7280;36}37 38html[data-theme='light'] .bar-graph-format-btn--active {39    background-color: #2ee88a;40    color: #000000;41}42 43.bar-graph-format-btn:hover {44    color: #fff;45}46 47.bar-graph-format-btn--active {48    background-color: #2ee88a; /* mismo verde de las barras, cuando está activo */49    color: #050505;50}51 52.bar-graph-format-btn--active:hover {53    color: #050505;54}55 56.bar-graph-container {57    display: flex;58    flex-direction: column;59}60 61.bar-graph-row {62    display: flex;63    align-items: center;64    height: 3rem;65}66 67.bar-graph-row:not(:last-child) {68    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.06);69}70 71html[data-theme='light'] .bar-graph-row:not(:last-child) {72    border-bottom: 0.0625rem solid rgba(15, 23, 42, 0.08);73}74 75.bar-graph-label {76    width: 5.625rem;77    flex-shrink: 0;78    font-size: 0.8rem;79    color: #ccc;80    padding-right: 0.625rem;81    overflow: hidden;82    text-overflow: ellipsis;83}84 85html[data-theme='light'] .bar-graph-label {86    color: #6b7280;87}88 89.bar-graph-track {90    position: relative;91    flex: 1;92    height: 1.625rem;93}94 95.bar-graph-fill {96    position: relative;97    height: 100%;98    background-color: #2ee88a;99    border-radius: 0.125rem;100    cursor: default;101    pointer-events: none;      /* asegura que no reaccione a clicks */102    transition: filter 0.15s ease;103    display: flex;104    align-items: center;105}106 107/* el hover lo activamos desde el track (que sí puede recibir el mouse) */108.bar-graph-track:hover .bar-graph-fill {109    filter: brightness(0.7);110}111 112.bar-graph-value {113    font-size: 0.82rem;114    font-weight: 600;115    white-space: nowrap;116}117 118.bar-graph-fill.label-inside .bar-graph-value {119    color: #fff;120    margin-left: auto;121    margin-right: 0.625rem;122}123 124.bar-graph-fill.label-outside .bar-graph-value {125    color: #fff;126    position: absolute;127    left: 100%;128    margin-left: 0.5rem;129}