.bpm-bloque {
    width: 100%;
    max-width: 250px;
}

.bpm-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9aa2a9;
    line-height: 1;
    margin-top: -0.7rem;
}

.bpm-visual {
    width: 100%;
    max-width: 250px;
    padding-top: 0.2rem;
    padding-bottom: 1.15rem;
}

.bpm-visual-linea {
    position: relative;
    height: 0.32rem;
    border-radius: 999px;
    background: #dfe3e8;
    overflow: visible;
}

.bpm-visual-progreso {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 999px;
    background: #9fb3c8;
}

.bpm-grupo {
    position: absolute;
    top: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.bpm-valor {
    position: absolute;
    left: 50%;
    bottom: -1.25rem;
    transform: translateX(-50%);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.bpm-marcador {
    position: absolute;
    left: 50%;
}

.bpm-marcador-actual {
    top: 50%;
    width: 0.68rem;
    height: 0.68rem;
    border-radius: 50%;
    background: #3f5f7d;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 2px #ffffff;
}

.notebook-resumen .bpm-marcador-actual {
    box-shadow: 0 0 0 2px var(--bgColor);
}

.bpm-marcador-objetivo {
    top: -0.95rem;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-left: 0.48rem solid transparent;
    border-right: 0.48rem solid transparent;
    border-top: 0.82rem solid var(--green);
}

.bpm-progreso .bpm-visual-progreso {
    background: #9fb3c8;
}

.bpm-progreso .bpm-marcador-actual {
    background: #2c81d1;
}

.bpm-superado .bpm-visual-progreso {
    background: #8ab89a;
}

.bpm-superado .bpm-marcador-actual {
    background: var(--green);
}

.bpm-marcadores-cerca .bpm-valor-actual {
    transform: translateX(-115%);
}

.bpm-marcadores-cerca .bpm-valor-objetivo {
    transform: translateX(15%);
}

.bpm-marcadores-cerca .bpm-marcador-objetivo {
    z-index: 4;
}

.bpm-marcadores-cerca .bpm-marcador-actual {
    z-index: 3;
}

.bpm-coincide-objetivo .bpm-grupo-coincidente {
    z-index: 5;
}

.bpm-coincide-objetivo .bpm-marcador-actual {
    z-index: 3;
}

.bpm-coincide-objetivo .bpm-marcador-objetivo {
    z-index: 4;
}

/* Variante modal: ring del círculo invisible sobre el fondo del modal,
   track de la línea más visible */
.bpm-modal .bpm-marcador-actual {
    box-shadow: 0 0 0 3px var(--fixedFontColor);
}

.bpm-modal .bpm-visual-linea {
    height: 0.4rem;
    background: #b0bac4;
}

.bpm-modal .bpm-valor {
    color: var(--fixedBgColor);
}