.comparar-wrapper {
position: relative;
width: 100%;
max-width: 100%;
height: 88px;
overflow: visible;
font-size: 12px;
font-family: sans-serif;
line-height: 1.4;
} .comparar-bar {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
max-width: 100%;
height: 12px;
background: linear-gradient(to right, green, yellow, red);
border-radius: 6px;
overflow: visible;
} .comparar-marker {
position: absolute;
transform: translateX(-50%);
z-index: 3;
width: max-content;
max-width: 120px;
text-align: center;
}
.comparar-marker.lane-top {
top: 0;
}
.comparar-marker.lane-bottom {
top: -4px;
}
.comparar-marker > div:first-child {
position: absolute;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
.comparar-label-box {
background: #ffffff;
border-radius: 6px;
padding: 2px 6px;
font-size: 11px;
line-height: 1.15;
color: #111827;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
transition: box-shadow 0.18s ease;
text-align: center;
}
.comparar-marker:hover > div:first-child,
.comparar-competitor-label:hover {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.comparar-marker.lane-top > div:first-child {
bottom: calc(100% + 6px);
}
.comparar-marker.lane-bottom > div:first-child {
top: 24px;
}
.comparar-marker-line {
width: 2px;
height: 20px;
background: #111827;
margin: 0 auto;
border-radius: 999px;
}
.comparar-labels div {
text-align: center;
} .comparar-competitor-marker {
position: absolute;
transform: translateX(-50%);
transition: opacity 0.18s ease;
z-index: 2;
}
.comparar-competitor-marker.lane-top {
top: -2px;
}
.comparar-competitor-marker.lane-bottom {
top: -2px;
}
.comparar-competitor-marker:hover {
z-index: 10;
}
.comparar-competitor-marker--primary {
z-index: 2;
}
.comparar-competitor-marker--secondary {
z-index: 1;
opacity: 0;
pointer-events: none;
}
.comparar-bar:hover .comparar-competitor-marker--secondary {
opacity: 1;
pointer-events: auto;
} .comparar-competitor-label {
position: absolute;
left: 50%;
min-width: 74px;
max-width: 110px;
transform: translateX(-50%);
white-space: nowrap;
z-index: 1;
}
.comparar-last-update {
display: inline-block;
margin-top: 2px;
font-size: 10px;
line-height: 1.1;
color: #6b7280;
}
.comparar-competitor-marker.lane-top .comparar-competitor-label {
bottom: 6px;
}
.comparar-competitor-marker.lane-bottom .comparar-competitor-label {
top: 24px;
} .comparar-competitor-dot {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
.comparar-competitor-marker.lane-top .comparar-competitor-dot,
.comparar-competitor-marker.lane-bottom .comparar-competitor-dot {
top: 0;
}
.comparar-competitor-dot--primary {
width: 3px;
height: 16px;
background: #2563eb;
border-radius: 999px;
}
.comparar-competitor-dot--secondary {
width: 8px;
height: 8px;
background: #6b7280;
border-radius: 50%;
}